<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>JavaScript使用 | XiaoFei🥝</title><meta name="keywords" content="JavaScript使用"><meta name="author" content="XiaoFei🥝"><meta name="copyright" content="XiaoFei🥝"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><meta name="description" content="JavaScript使用">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript使用">
<meta property="og:url" content="https://www.naste.top:1024/posts/79bd748b.html">
<meta property="og:site_name" content="XiaoFei🥝">
<meta property="og:description" content="JavaScript使用">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://www.naste.top:9000/webp/1515952743754.webp">
<meta property="article:published_time" content="2022-07-01T10:01:02.000Z">
<meta property="article:modified_time" content="2024-04-26T09:52:18.976Z">
<meta property="article:author" content="XiaoFei🥝">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://www.naste.top:9000/webp/1515952743754.webp"><link rel="shortcut icon" href="/"><link rel="canonical" href="https://www.naste.top:1024/posts/79bd748b"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.staticfile.org/fancyapps-ui/4.0.31/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.json","preload":true,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: {"limitDay":365,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":230},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdnjs.cloudflare.com/ajax/libs/flickr-justified-gallery/2.1.2/fjGallery.min.js',
      css: 'https://cdnjs.cloudflare.com/ajax/libs/flickr-justified-gallery/2.1.2/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'JavaScript使用',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-04-26 17:52:18'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="https://cdn1.tianli0.top/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css"><style id="themeColor"></style><style id="rightSide"></style><style id="transPercent"></style><style id="blurNum"></style><style id="settingStyle"></style><span id="fps"></span><style id="defineBg"></style><style id="menu_shadow"></style><svg aria-hidden="true" style="position:absolute; overflow:hidden; width:0; height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z" fill="#FFD878" p-id="8420"></path><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><path d="M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z" fill="#4D5152" p-id="8422"></path><path d="M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z" fill="#4D5152" p-id="8423"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css" media="print" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="XiaoFei🥝" type="application/atom+xml">
</head><body><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://www.naste.top:9000/images/cat.jpg" onerror="onerror=null;src='/assets/r1.jpg'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">149</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">99</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">46</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-home"></use></svg><span class="menu_word" style="font-size:17px"> 首页</span></a></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon--article"></use></svg><span class="menu_word" style="font-size:17px"> 文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-guidang1">                   </use></svg><span class="menu_word" style="font-size:17px"> 归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-sekuaibiaoqian">                   </use></svg><span class="menu_word" style="font-size:17px"> 标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-fenlei">                   </use></svg><span class="menu_word" style="font-size:17px"> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-pinweishenghuo"></use></svg><span class="menu_word" style="font-size:17px"> 休闲</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/life/music/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-yinle">                   </use></svg><span class="menu_word" style="font-size:17px"> 八音盒</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/movies/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-dianying1">                   </use></svg><span class="menu_word" style="font-size:17px"> 影院</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/games/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-youxishoubing">                   </use></svg><span class="menu_word" style="font-size:17px"> 游戏</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-xiangzi"></use></svg><span class="menu_word" style="font-size:17px"> 八宝箱</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/box/gallery/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-tubiaozhizuomoban">                   </use></svg><span class="menu_word" style="font-size:17px"> 画廊</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/box/animation/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-nvwumao">                   </use></svg><span class="menu_word" style="font-size:17px"> 动画</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/box/nav/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-zhifengche">                   </use></svg><span class="menu_word" style="font-size:17px"> 网址导航</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-shejiaoxinxi"></use></svg><span class="menu_word" style="font-size:17px"> 社交</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/social/fcircle/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-pengyouquan">                   </use></svg><span class="menu_word" style="font-size:17px"> 朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-liuyan">                   </use></svg><span class="menu_word" style="font-size:17px"> 留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/social/link/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-lianjie">                   </use></svg><span class="menu_word" style="font-size:17px"> 友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-wangye"></use></svg><span class="menu_word" style="font-size:17px"> 网站</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/site/census/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon--tongjibiao">                   </use></svg><span class="menu_word" style="font-size:17px"> 网站统计</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/site/echarts/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-shujutongji1">                   </use></svg><span class="menu_word" style="font-size:17px"> 文章统计</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/site/time/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-xianxingshalou">                   </use></svg><span class="menu_word" style="font-size:17px"> 旧时光</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-maoliang"></use></svg><span class="menu_word" style="font-size:17px"> 个人</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/personal/bb/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-qunliaotian">                   </use></svg><span class="menu_word" style="font-size:17px"> 唠叨</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/love/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-love-sign">                   </use></svg><span class="menu_word" style="font-size:17px"> 恋爱小屋</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/about/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-paperplane">                   </use></svg><span class="menu_word" style="font-size:17px"> 关于</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/encryption/%E6%9C%BA%E5%9C%BA/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-paperplane">                   </use></svg><span class="menu_word" style="font-size:17px"> 机场</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">XiaoFei🥝</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-home"></use></svg><span class="menu_word" style="font-size:17px"> 首页</span></a></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon--article"></use></svg><span class="menu_word" style="font-size:17px"> 文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-guidang1">                   </use></svg><span class="menu_word" style="font-size:17px"> 归档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-sekuaibiaoqian">                   </use></svg><span class="menu_word" style="font-size:17px"> 标签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-fenlei">                   </use></svg><span class="menu_word" style="font-size:17px"> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-pinweishenghuo"></use></svg><span class="menu_word" style="font-size:17px"> 休闲</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/life/music/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-yinle">                   </use></svg><span class="menu_word" style="font-size:17px"> 八音盒</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/movies/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-dianying1">                   </use></svg><span class="menu_word" style="font-size:17px"> 影院</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/life/games/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-youxishoubing">                   </use></svg><span class="menu_word" style="font-size:17px"> 游戏</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-xiangzi"></use></svg><span class="menu_word" style="font-size:17px"> 八宝箱</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/box/gallery/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-tubiaozhizuomoban">                   </use></svg><span class="menu_word" style="font-size:17px"> 画廊</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/box/animation/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-nvwumao">                   </use></svg><span class="menu_word" style="font-size:17px"> 动画</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/box/nav/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-zhifengche">                   </use></svg><span class="menu_word" style="font-size:17px"> 网址导航</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-shejiaoxinxi"></use></svg><span class="menu_word" style="font-size:17px"> 社交</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/social/fcircle/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-pengyouquan">                   </use></svg><span class="menu_word" style="font-size:17px"> 朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-liuyan">                   </use></svg><span class="menu_word" style="font-size:17px"> 留言板</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/social/link/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-lianjie">                   </use></svg><span class="menu_word" style="font-size:17px"> 友人帐</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-wangye"></use></svg><span class="menu_word" style="font-size:17px"> 网站</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/site/census/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon--tongjibiao">                   </use></svg><span class="menu_word" style="font-size:17px"> 网站统计</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/site/echarts/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-shujutongji1">                   </use></svg><span class="menu_word" style="font-size:17px"> 文章统计</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/site/time/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-xianxingshalou">                   </use></svg><span class="menu_word" style="font-size:17px"> 旧时光</span></a></li></ul></div><div class="menus_item"><a class="site-page group faa-parent animated-hover hide" href="javascript:void(0);"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-maoliang"></use></svg><span class="menu_word" style="font-size:17px"> 个人</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/personal/bb/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-qunliaotian">                   </use></svg><span class="menu_word" style="font-size:17px"> 唠叨</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/love/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-love-sign">                   </use></svg><span class="menu_word" style="font-size:17px"> 恋爱小屋</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/personal/about/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-paperplane">                   </use></svg><span class="menu_word" style="font-size:17px"> 关于</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/encryption/%E6%9C%BA%E5%9C%BA/"><svg class="menu_icon faa-tada" aria-hidden="true" style="width:1.30em;height:1.30em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;"><use xlink:href="#icon-paperplane">                   </use></svg><span class="menu_word" style="font-size:17px"> 机场</span></a></li></ul></div></div><center id="name-container"><a id="page-name" href="javascript:scrollToTop()">PAGE_NAME</a></center><div id="nav-right"><div id="search-button"><a class="search faa-parent animated-hover" title="检索站内任何你想要的信息"><svg class="faa-tada icon" style="height:24px;width:24px;fill:currentColor;position:relative;top:6px" aria-hidden="true"><use xlink:href="#icon-valentine_-search-love-find-heart"></use></svg><span> 搜索</span></a></div><a class="meihua faa-parent animated-hover" onclick="toggleWinbox()" title="美化设置-自定义你的风格" id="meihua-button"><svg class="faa-tada icon" style="height:26px;width:26px;fill:currentColor;position:relative;top:8px" aria-hidden="true"><use xlink:href="#icon-tupian1"></use></svg></a><a class="sun_moon faa-parent animated-hover" onclick="switchNightMode()" title="浅色和深色模式转换" id="nightmode-button"><svg class="faa-tada" style="height:25px;width:25px;fill:currentColor;position:relative;top:7px" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon">       </use></svg></a><div id="toggle-menu"><a><i class="fas fa-bars fa-fw"></i></a></div></div></div></nav><div id="post-info"><h1 class="post-title">JavaScript使用</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><svg class="meta_icon post-meta-icon" style="width:30px;height:30px;position:relative;top:10px"><use xlink:href="#icon-rili"></use></svg><span class="post-meta-label">发表于 </span><time class="post-meta-date-created" datetime="2022-07-01T10:01:02.000Z" title="发表于 2022-07-01 18:01:02">2022-07-01</time><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-gengxin1"></use></svg><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-04-26T09:52:18.976Z" title="更新于 2024-04-26 17:52:18">2024-04-26</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-biaoqian"></use></svg><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><i class="fas fa-angle-right post-meta-separator"></i><svg class="meta_icon post-meta-icon" style="width:18px;height:18px;position:relative;top:5px"><use xlink:href="#icon-biaoqian"></use></svg><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/">前端基础</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><svg class="meta_icon post-meta-icon" style="width:25px;height:25px;position:relative;top:8px"><use xlink:href="#icon-charuword"></use></svg><span class="post-meta-label">字数总计:</span><span class="word-count">1.1w</span><span class="post-meta-separator">|</span><svg class="meta_icon post-meta-icon" style="width:20px;height:20px;position:relative;top:5px"><use xlink:href="#icon-shizhong"></use></svg><span class="post-meta-label">阅读时长:</span><span>45分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="JavaScript使用"><svg class="meta_icon post-meta-icon" style="width:25px;height:25px;position:relative;top:5px"><use xlink:href="#icon-eye"></use></svg><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="一、前端知识体系"><a href="#一、前端知识体系" class="headerlink" title="一、前端知识体系"></a>一、前端知识体系</h1><p>想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。</p>
<h2 id="1、前端三要素"><a href="#1、前端三要素" class="headerlink" title="1、前端三要素"></a>1、前端三要素</h2><ul>
<li>HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容</li>
<li>CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。</li>
<li>JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为</li>
</ul>
<h3 id="1、1、结构层（HTML）"><a href="#1、1、结构层（HTML）" class="headerlink" title="1、1、结构层（HTML）"></a>1、1、结构层（HTML）</h3><h3 id="1、2、表现层（CSS）"><a href="#1、2、表现层（CSS）" class="headerlink" title="1、2、表现层（CSS）"></a>1、2、表现层（CSS）</h3><p>CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，主要缺陷如下：</p>
<ul>
<li>语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；</li>
<li>没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。</li>
</ul>
<p><strong>什么是CSS预处理器</strong></p>
<p>CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。</p>
<p><strong>常用的CSS预处理器有哪些</strong></p>
<ul>
<li>SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。</li>
<li>LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。</li>
</ul>
<h3 id="1、3行为层（JavaScript）"><a href="#1、3行为层（JavaScript）" class="headerlink" title="1、3行为层（JavaScript）"></a>1、3行为层（JavaScript）</h3><p>JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。</p>
<h2 id="2、JavaScript框架"><a href="#2、JavaScript框架" class="headerlink" title="2、JavaScript框架"></a>2、JavaScript框架</h2><ul>
<li>JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；</li>
<li>Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–&gt;2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）</li>
<li>React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；</li>
<li>Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；</li>
<li>Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；</li>
</ul>
<h3 id="UI框架"><a href="#UI框架" class="headerlink" title="UI框架"></a>UI框架</h3><ul>
<li>Ant-Design：阿里巴巴出品，基于React的UI框架</li>
<li>ElementUI、iview、ice：饿了么出品，基于Vue的UI框架</li>
<li>BootStrap：Teitter推出的一个用于前端开发的开源工具包</li>
<li>AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架</li>
</ul>
<h3 id="JavaScript构建工具"><a href="#JavaScript构建工具" class="headerlink" title="JavaScript构建工具"></a>JavaScript构建工具</h3><ul>
<li>Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript</li>
<li>WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载</li>
</ul>
<p><strong>注：以上知识点已将WebApp开发所需技能全部梳理完毕</strong></p>
<h2 id="3、三端同一"><a href="#3、三端同一" class="headerlink" title="3、三端同一"></a>3、三端同一</h2><h3 id="混合开发（Hybrid-App）"><a href="#混合开发（Hybrid-App）" class="headerlink" title="混合开发（Hybrid App）"></a>混合开发（Hybrid App）</h3><p>主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：</p>
<ul>
<li>云打包：HBuild -&gt; HBuildX，DCloud 出品；API Cloud</li>
<li>本地打包： Cordova（前身是 PhoneGap）</li>
</ul>
<h3 id="微信小程序"><a href="#微信小程序" class="headerlink" title="微信小程序"></a>微信小程序</h3><p>详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI</p>
<h1 id="二、快速入门"><a href="#二、快速入门" class="headerlink" title="二、快速入门"></a>二、快速入门</h1><h2 id="1、引入JavaScript"><a href="#1、引入JavaScript" class="headerlink" title="1、引入JavaScript"></a>1、引入JavaScript</h2><ul>
<li><p>内部使用</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-handlebars"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars">	//....</span></span></span><br><span class="line"><span class="language-xml"><span class="language-handlebars"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>外部引入</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--外部引入</span></span><br><span class="line"><span class="comment">       注意：script必须成对出现</span></span><br><span class="line"><span class="comment">   --&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;js/hj.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">   <span class="comment">&lt;!--不用显示定义type，也默认就是javaScript--&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>测试</p>
<ul>
<li><p>html代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--script标签内，写Javascript代码--&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--&lt;script&gt;</span></span><br><span class="line"><span class="comment">        alert(&quot;hello,world&quot;);</span></span><br><span class="line"><span class="comment">    &lt;/script&gt;--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--外部引入</span></span><br><span class="line"><span class="comment">        注意：script必须成对出现</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../js/1、快速入门/快速入门.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--不用显示定义type，也默认就是javaScript--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--这里也可以存放--&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>JavaScript代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;快速入门&quot;</span>);</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h2 id="2、基本语法入门"><a href="#2、基本语法入门" class="headerlink" title="2、基本语法入门"></a>2、基本语法入门</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>基本语法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--JavaScript严格区分大小写--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 1. 定义变量   变量类型 变量名 = 变量值</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">var</span> score = <span class="number">1</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//alert(num)</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 2. 条件控制</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">if</span> (score &gt; <span class="number">60</span> &amp;&amp; score &lt; <span class="number">70</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">&quot;60~70&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (score &gt; <span class="number">70</span> &amp;&amp; score &lt; <span class="number">80</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">&quot;70~80&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">            &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="title function_">alert</span>(<span class="string">&quot;other&quot;</span>)</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="3、数据类型简单定义"><a href="#3、数据类型简单定义" class="headerlink" title="3、数据类型简单定义"></a>3、数据类型简单定义</h2><p>数值，文本，图形，音频，视频</p>
<p>number、字符串、布尔值、逻辑运算符、比较运算符、浮点数（number）、null、undefind、数组、对象、</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&#x27;use strict&#x27;</span>;</span><br><span class="line"><span class="comment">// number、</span></span><br><span class="line"><span class="keyword">let</span> num = <span class="number">1</span>;</span><br><span class="line"><span class="comment">// 字符串、</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;how are you &quot;</span>;</span><br><span class="line"><span class="comment">// 布尔值、</span></span><br><span class="line"><span class="keyword">let</span> bool_value = <span class="literal">false</span>;</span><br><span class="line"><span class="comment">// 逻辑运算符、</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num &amp;&amp; float_num);</span><br><span class="line"><span class="comment">// 比较运算符、</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num &gt; float_num);</span><br><span class="line"><span class="comment">// 浮点数（number）、</span></span><br><span class="line"><span class="keyword">let</span> float_num = <span class="number">1.5</span>;</span><br><span class="line"><span class="comment">// null、</span></span><br><span class="line"><span class="keyword">let</span> a;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line"><span class="comment">//undefind、</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(b);</span><br><span class="line"><span class="comment">// 数组、</span></span><br><span class="line"><span class="keyword">let</span> arrays = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="string">&quot;123&quot;</span>];</span><br><span class="line"><span class="comment">// 对象、</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">gender</span>: <span class="string">&quot;男&quot;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>数据类型：</p>
<ul>
<li><p>numbe：不区分小数和整数，只要是数字就是Number类型的</p>
<ul>
<li>NaN === NaN，这个与所有的数值都不相等，包括自己</li>
<li><p>只能通过isNaN（NaN）来判断这个数是否是NaN</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">123</span><span class="comment">//整数123</span></span><br><span class="line"><span class="number">123.1</span><span class="comment">//浮点数123.1</span></span><br><span class="line"><span class="number">1.123e3</span><span class="comment">//科学计数法</span></span><br><span class="line">-<span class="number">99</span><span class="comment">//负数</span></span><br><span class="line"><span class="title class_">NaN</span>	<span class="comment">//not a number</span></span><br><span class="line"><span class="title class_">Infinity</span> <span class="comment">// 表示无限大</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre><code>- 字符串：&#39;abc&#39;  &quot;abc&quot;

- 布尔值：true、false

- 逻辑运算

    <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&amp;&amp; 两个都为真，结果为真</span><br><span class="line"></span><br><span class="line">|| 一个为真，结果为真</span><br><span class="line"></span><br><span class="line">! 	真即假，假即真</span><br></pre></td></tr></table></figure>

- 比较运算符：**这是一个JS的缺陷，坚持不要使用 == 比较**

    <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">=  赋值运算符</span><br><span class="line"><span class="number">1</span>，<span class="string">&quot;1&quot;</span></span><br><span class="line">== 等于（类型不一样，值一样，也会判断为<span class="literal">true</span>）</span><br><span class="line">=== 绝对等于（类型一样，值一样，结果为<span class="literal">true</span>）</span><br></pre></td></tr></table></figure>



- 定义变量

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名;</span><br></pre></td></tr></table></figure>



- 浮点数问题：**存在进度损失，在Java中可以使用BigDecimal类来解决精度问题**

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>((<span class="number">1</span>/<span class="number">3</span>) === (<span class="number">1</span>-<span class="number">2</span>/<span class="number">3</span>))  <span class="comment">/*false*/</span></span><br></pre></td></tr></table></figure>


- null 和 undefined

    - null 空
    - undefined 未定义



- 数组

    - Java的数组必须是相同类型的对象~，JS中不需要这样
    - 取数字下标：如果越界了，就会 报undefined



- 对象    

    - 对象是大括号，数组是中括号
    - 每个属性之间使用逗号隔开，最后一个属性不需要逗号
</code></pre><h2 id="4、严格检查模式"><a href="#4、严格检查模式" class="headerlink" title="4、严格检查模式"></a>4、严格检查模式</h2><ul>
<li>var和let的区别：var定义相当于成员变量，let定义的相当于局部变量，建议使用let来定义变量</li>
</ul>
<ul>
<li><p>语法检查：在JavaScript代码的最前面加上（  ‘use strict’;   ）</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">    前提：IDEA需要设置支持ES6语法</span></span><br><span class="line"><span class="comment">        &#x27;use strict&#x27;;严格检查模式，预防JavaScript的随意性导致产生的一些问题</span></span><br><span class="line"><span class="comment">        必须写在JavaScript的第一行！</span></span><br><span class="line"><span class="comment">        局部变量建议都使用let去定义~</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"><span class="meta"></span></span></span><br><span class="line"><span class="meta"><span class="language-javascript">        &#x27;use strict&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//全局变量</span></span></span><br><span class="line"><span class="language-javascript">         <span class="keyword">let</span> i=<span class="number">1</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//ES6 let</span></span></span><br><span class="line"><span class="language-javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h1 id="三、数据类型"><a href="#三、数据类型" class="headerlink" title="三、数据类型"></a>三、数据类型</h1><h2 id="1、字符串使用"><a href="#1、字符串使用" class="headerlink" title="1、字符串使用"></a>1、字符串使用</h2><ul>
<li><p>正常字符串我们使用 单引号，或者双引号包裹</p>
</li>
<li><p>注意转义字符 \</p>
<ul>
<li>```<br>  \’<br>  \n<br>  \t<br>  \u4e2d    \u##### Unicode字符<br>  \x41    Ascall字符  <figure class="highlight autohotkey"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 多行字符串编写</span><br><span class="line"></span><br><span class="line">    - ```javascript</span><br><span class="line">        //tab 上面 esc下面</span><br><span class="line">        let a =</span><br><span class="line">            `</span><br><span class="line">        how</span><br><span class="line">        are</span><br><span class="line">        you</span><br><span class="line">        `	</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>模板字符串</p>
<ul>
<li><code>``javascript
  //tab 上面 esc下面
  let name = &#39;Tom&#39;;
  let age = 3;
  var msg =</code>你好，${name}`  <figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 字符串长度</span><br><span class="line"></span><br><span class="line">    - ```javascript</span><br><span class="line">        <span class="built_in">let</span> <span class="built_in">str</span> = <span class="string">&quot;how are you&quot;</span></span><br><span class="line">        alert(<span class="built_in">str</span>.length) <span class="comment">/* 11 */</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>字符串的可变性：字符串是不可变的</p>
<ul>
<li>```javascript<br>  //通过数组来修改之后字符串还是不会改变<br>  let str = “are”<br>  str[1] = ‘b’<br>  alert(str) /<em> are </em>/  <figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 大小写转换</span><br><span class="line"></span><br><span class="line">    - ```javascript</span><br><span class="line">        <span class="comment">//注意，这里是方法，不是属性了</span></span><br><span class="line">        <span class="keyword">let</span> str = <span class="string">&quot;how ARE you ! &quot;</span>;</span><br><span class="line">        alert(str.<span class="keyword">to</span><span class="constructor">UpperCase()</span>);<span class="comment">//将小写字母转换为大写：HOW ARE YOU !</span></span><br><span class="line">        alert(str.<span class="keyword">to</span><span class="constructor">LowerCase()</span>);<span class="comment">//将大写字母转换为小写：how are you ! </span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>查询字符串第一次出现的位置：如果没有出现返回-1，如果出现了就返回第一次出现的位置</p>
<ul>
<li>```JavaScript<br>  let str = “how ARE you ! “;<br>  alert(str.indexOf(‘A’));  <figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 截取字符串</span><br><span class="line"></span><br><span class="line">    - ```JavaScript</span><br><span class="line">        <span class="built_in">let</span> <span class="built_in">str</span> = <span class="string">&quot;howAREYou ! &quot;</span>;</span><br><span class="line">        alert(<span class="built_in">str</span>.substr(<span class="number">2</span>));<span class="comment">//从第2个字符串截取到最后一个字符串</span></span><br><span class="line">        alert(<span class="built_in">str</span>.substr(<span class="number">0</span>,<span class="number">2</span>));<span class="comment">//[1,3)</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h2 id="2、数组使用"><a href="#2、数组使用" class="headerlink" title="2、数组使用"></a>2、数组使用</h2><p>Array可以包含任意的数据类型</p>
<ul>
<li><p>Array可以包含任意的数据类型，通过下标取值和赋值</p>
<ul>
<li>```JavaScript<br>  let array = [1, 2, “3”]<br>  array[1] = “12”;    //通过下标赋值<br>  alert(array[1]);    //通过下标取值  <figure class="highlight smali"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 长度：**假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失，最好不去修改数组的下标**</span><br><span class="line"></span><br><span class="line">    - ```JavaScript</span><br><span class="line">        let<span class="built_in"> array </span>= [1, 2, <span class="string">&quot;3&quot;</span>]</span><br><span class="line">        array.length = 10;</span><br><span class="line">        alert(array)</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>indexOf，通过元素获得下标索引：如果没有出现返回-1，如果出现了就返回第一次出现的位置</p>
<ul>
<li><p><strong>字符串的”1”和数字 1 是不同的</strong></p>
</li>
<li><p>```javascript<br>  let array = [“1”, 1, “3”]<br>  alert(array.indexOf(“1”))    // 0 </p>
  <figure class="highlight smali"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- slice（）：和substr使用方法一样。截取Array的一部分，返回的一个新数组，类似于String中substring，**不会修改原来的数组**</span><br><span class="line"></span><br><span class="line">    - ```JavaScript</span><br><span class="line">        let<span class="built_in"> array </span>= [<span class="string">&quot;1&quot;</span>, 1, <span class="string">&quot;3&quot;</span>]</span><br><span class="line">        alert(array.slice(1))//1,3</span><br><span class="line">        alert(array.slice(0, 2))//1,1</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>push()，pop()尾部：</p>
<ul>
<li><p>push()：将新元素追加到数组末尾，然后返回数组的新长度。</p>
</li>
<li><p>pop()：从数组中删除最后一个元素并返回它。</p>
</li>
<li><p>```javascript<br>  //push(“新数据值”)：在数组尾部插入一个数据或一个数组<br>  //pop()：将数组最后一个数据删除</p>
<p>  //插入数组：插入数组将会作为一个元素，数组的元素只会加一，相当于插入了一个数组类型的值进去，而不是将数组的每一个值插入进去<br>  let array = [“1”, “1”, “3”];<br>  let array2 = [“how”, “are”, “you”];<br>  alert(array.push(array2));<br>  console.log(array)// 4 </p>
<p>  //插入普通类型的值：<br>  alert((array.push(“123”)));</p>
<p>  //删除数组的最后一个元素：<br>  alert(array.pop()) // 123</p>
  <figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- unshift(),shift() 头部：</span><br><span class="line"></span><br><span class="line">    - unshift()：在数组的开头插入新元素</span><br><span class="line"></span><br><span class="line">    - shift()：从数组中删除第一个元素并返回它。</span><br><span class="line"></span><br><span class="line">    - ```JavaScript</span><br><span class="line">        <span class="regexp">//u</span>nshift()：在数组的开头插入新元素</span><br><span class="line">        <span class="regexp">//</span>shift()：从数组中删除第一个元素并返回它。</span><br><span class="line">        </span><br><span class="line">        <span class="regexp">//</span>插入数组：插入数组将会作为一个元素，数组的元素只会加一，相当于插入了一个数组类型的值进去，而不是将数组的每一个值插入进去</span><br><span class="line">        let array = [<span class="string">&quot;1&quot;</span>, <span class="string">&quot;1&quot;</span>, <span class="string">&quot;3&quot;</span>];</span><br><span class="line">        let array2 = [<span class="string">&quot;how&quot;</span>, <span class="string">&quot;are&quot;</span>, <span class="string">&quot;you&quot;</span>];</span><br><span class="line">        alert(array.unshift(array2));</span><br><span class="line">        console.log(array)<span class="regexp">//</span> <span class="number">4</span> </span><br><span class="line">        </span><br><span class="line">        <span class="regexp">//</span>插入普通类型的值：</span><br><span class="line">        alert((array.unshift(<span class="string">&quot;123&quot;</span>)));</span><br><span class="line">        </span><br><span class="line">        <span class="regexp">//</span>删除数组的第一个一个元素：</span><br><span class="line">        alert(array.shift()) <span class="regexp">//</span> <span class="number">123</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>排序sort()：默认升序排列</p>
<ul>
<li>```javascript<br>  let array = [“B”,”C”,”A”]<br>  array.sort()<br>  alert(array)//A,B,C  <figure class="highlight smali"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 元素反转reverse()：</span><br><span class="line"></span><br><span class="line">    - ```JavaScript</span><br><span class="line">        let<span class="built_in"> array </span>= [<span class="string">&quot;B&quot;</span>,<span class="string">&quot;C&quot;</span>,<span class="string">&quot;A&quot;</span>]</span><br><span class="line">        array.reverse()</span><br><span class="line">        alert(array)//A,C,B</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>concat()：<strong>该函数不会修改原数组</strong>，只会返回一个新的数组，原来的数组不会改变</p>
<ul>
<li>```javascript<br>  let array = [“B”,”C”,”A”];<br>  let array2 = [“1”,”2”,”3”];<br>  alert(array.concat(array2));//B,C,A,1,2,3<br>  alert(array);//B,C,A  <figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- 连接符<span class="built_in">join</span>：打印拼接数组，使用特定的字符串连接（**不会修改原来的数组**）</span><br><span class="line"></span><br><span class="line">    - ```javascript</span><br><span class="line">        <span class="built_in">let</span> <span class="built_in">array</span> = [<span class="string">&quot;B&quot;</span>,<span class="string">&quot;C&quot;</span>,<span class="string">&quot;A&quot;</span>];</span><br><span class="line">        alert(<span class="built_in">array</span>.<span class="built_in">join</span>(<span class="string">&quot;-&quot;</span>))//B-C-A</span><br><span class="line">        alert(<span class="built_in">array</span>);//B,C,A</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>多维数组</p>
<ul>
<li>```javascript<br>  let array3 = [[1,2],[3,4],[5,6]];<br>  alert(array3[1][1]);//4  <figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">- find()：</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">## 3、对象</span></span><br><span class="line"></span><br><span class="line">若干个键值对</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">- Js中对象，<span class="punctuation">&#123;</span>…<span class="punctuation">&#125;</span>表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！JavaScript中的所有的键都是字符串，值是任意对象！</span><br><span class="line"></span><br><span class="line">    ```javascript</span><br><span class="line">    var 对象名 = <span class="punctuation">&#123;</span></span><br><span class="line">    	属性名：属性值，</span><br><span class="line">    	属性名：属性值，</span><br><span class="line">    	属性名：属性值</span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="comment">//定义了一个person对象</span></span><br><span class="line">    let P<span class="attr">erson</span> <span class="operator">=</span> <span class="punctuation">&#123;</span></span><br><span class="line"><span class="symbol">        name:</span> <span class="string">&quot;张三&quot;</span>,</span><br><span class="line"><span class="symbol">        gender:</span> <span class="string">&quot;男&quot;</span>,</span><br><span class="line"><span class="symbol">        id:</span> <span class="number">1</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<ul>
<li><p>对象赋值</p>
</li>
<li><p>使用一个不存在的对象属性，不会报错！undefined</p>
</li>
<li><p>动态的删减属性，通过delete删除对象的属性</p>
</li>
<li><p>动态的添加，直接给新的属性添加值即可</p>
</li>
<li><p>判断属性值是否在这个对象中！xxx in xxx</p>
</li>
<li><p>判断一个属性是否是这个对象自身拥有的 hasOwnProperty()：确定对象是否具有具有指定名称的属性。</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">gender</span>: <span class="string">&quot;男&quot;</span>,</span><br><span class="line">    <span class="attr">id</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//对象赋值</span></span><br><span class="line"><span class="title class_">Person</span>.<span class="property">name</span> = <span class="string">&quot;韩信&quot;</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="property">name</span>);<span class="comment">//韩信</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用一个不存在的对象属性，不会报错！undefined</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="property">password</span>);<span class="comment">//undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//动态的删减属性，通过delete删除对象的属性</span></span><br><span class="line"><span class="keyword">delete</span> <span class="title class_">Person</span>.<span class="property">id</span>;</span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="property">id</span>);<span class="comment">//删除后去访问变为：undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//动态的添加，直接给新的属性添加值即可</span></span><br><span class="line"><span class="title class_">Person</span>.<span class="property">email</span> = <span class="string">&quot;1903078434@qq.com&quot;</span>;</span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="property">email</span>);<span class="comment">//1903078434@qq.com</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//判断属性值是否在这个对象中！xxx in xxx</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;email&quot;</span> <span class="keyword">in</span> <span class="title class_">Person</span>);<span class="comment">//true</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;password&quot;</span> <span class="keyword">in</span> <span class="title class_">Person</span>);<span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//判断一个属性是否是这个对象自身拥有的 hasOwnProperty()</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="title function_">hasOwnProperty</span>(<span class="string">&quot;name&quot;</span>));<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="4、流程控制"><a href="#4、流程控制" class="headerlink" title="4、流程控制"></a>4、流程控制</h2><p>if判断</p>
<p>while循环，避免程序死循环</p>
<p>for循环</p>
<p>forEach循环（ES5.1特性）</p>
<p>for …in———-下标：在不知道数组大小的时候可以使用该函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">   if判断</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">   <span class="keyword">if</span> (<span class="number">1</span> &lt; <span class="number">2</span>) &#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;1&lt;2&quot;</span>);</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">/*</span></span><br><span class="line"><span class="comment">   while循环，避免程序死循环</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">   <span class="keyword">let</span> i = <span class="number">1</span>;</span><br><span class="line">   <span class="keyword">while</span> (i &lt; <span class="number">5</span>) &#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;while&quot;</span> + i++);</span><br><span class="line">   &#125;</span><br><span class="line">   <span class="comment">/*</span></span><br><span class="line"><span class="comment">   for循环</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">   <span class="keyword">for</span> (<span class="keyword">let</span> j = <span class="number">0</span>; j &lt; <span class="number">5</span>; j++) &#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;for&quot;</span> + j);</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="comment">/* forEach循环（ES5.1特性）</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">   <span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line">   arr.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">value</span>) &#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;foreach&quot;</span> + value);</span><br><span class="line">   &#125;);</span><br><span class="line"></span><br><span class="line">   <span class="comment">/*  for …in-------下标</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"></span><br><span class="line">   <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> arr) &#123;</span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;for...in：&quot;</span> + i);</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
<h2 id="5、Map和Set（ES6的新特性）"><a href="#5、Map和Set（ES6的新特性）" class="headerlink" title="5、Map和Set（ES6的新特性）"></a>5、Map和Set（ES6的新特性）</h2><p>格式：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//创建Map集合</span></span><br><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>([	[<span class="string">&quot;键&quot;</span>,<span class="string">&quot;值&quot;</span>],[<span class="string">&quot;键&quot;</span>,<span class="string">&quot;值&quot;</span>] ])</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建Set集合</span></span><br><span class="line"><span class="keyword">let</span> set = <span class="keyword">new</span> <span class="title class_">Set</span>([ [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>] ])<span class="comment">//重复的元素会被删除</span></span><br></pre></td></tr></table></figure>
<p>Map：和python中的字典类似</p>
<ul>
<li>```JavaScript<pre><code>          &#39;use strict&#39;;
          let map = new Map([[&quot;name&quot;, &quot;张三&quot;], [&quot;gender&quot;, &quot;男&quot;]])
          alert(map.get(&quot;name&quot;))//张三
          map.set(&quot;gender&quot;, &quot;女&quot;);//set方法会修改原来的map集合
          alert(map.get(&quot;gender&quot;));//女
</code></pre>  <figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">    </span><br><span class="line"></span><br><span class="line"><span class="keyword">Set</span>：无序不重复的集合</span><br><span class="line"></span><br><span class="line">- ```javascript</span><br><span class="line">                let <span class="keyword">set</span> = <span class="built_in">new</span> <span class="keyword">Set</span>([<span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>]);</span><br><span class="line">                <span class="keyword">set</span>.<span class="keyword">delete</span>(<span class="number">1</span>);</span><br><span class="line">                <span class="keyword">set</span>.<span class="keyword">add</span>(<span class="number">4</span>);</span><br><span class="line">                alert(<span class="keyword">set</span>.has(<span class="number">3</span>));//<span class="keyword">true</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="6、iterator（es6新特性）"><a href="#6、iterator（es6新特性）" class="headerlink" title="6、iterator（es6新特性）"></a>6、iterator（es6新特性）</h2><p><strong>建议使用iterator，不建议使用for…in</strong></p>
<p>遍历数组</p>
<ul>
<li>```JavaScript<br>  /<em>遍历数组</em>/<br>  let array = [1, 23, 22, 3, 42];<br>  for (let i of array) {<pre><code>  console.log(&quot;数组：&quot; + arr[i]);
</code></pre>  }  <figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">遍历<span class="built_in">Map</span>：遍历<span class="built_in">Map</span>，<span class="built_in">Map</span>集合遍历出来的每一个键值对都是一个数组</span><br><span class="line"></span><br><span class="line">- ```<span class="language-javascript">javascript</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*遍历Map，Map集合遍历出来的每一个键值对都是一个数组*/</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>([[<span class="string">&quot;name&quot;</span>, <span class="string">&quot;张三&quot;</span>], [<span class="string">&quot;gender&quot;</span>, <span class="string">&quot;男&quot;</span>]]);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">of</span> map) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Map集合&quot;</span> + i);</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>遍历set：</p>
<ul>
<li>```javascript<br>  /<em>Set集合遍历出来的值，会将重复的值去除</em>/<br>  let set = new Set([3, 1, 2, 1, 1, 2]);<br>  for (let i of set) {<pre><code>  console.log(&quot;Set集合：&quot; + i);
</code></pre>  }  <figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">    </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># 四、函数</span></span><br><span class="line"></span><br><span class="line">方法：对象（属性，方法）</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">## 1、定义函数</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">- 格式</span><br><span class="line"></span><br><span class="line">    ```javascript</span><br><span class="line">    <span class="regexp">//</span>定义函数格式</span><br><span class="line">    <span class="keyword">function</span> 函数名(参数...)&#123;</span><br><span class="line">        方法体</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>定义方式一</p>
<ul>
<li><p>一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params">x</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(x&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> -x;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<ul>
<li><p>定义方式二</p>
<ul>
<li><p>function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！方式一和方式二等价，调用方式一样！</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> abs = <span class="keyword">function</span>(<span class="params">x</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(x&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> -x;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用：变量名(参数)</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<ul>
<li><p>调用函数</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：调用方式一建立的函数</span></span><br><span class="line"><span class="title function_">abs</span>(<span class="number">10</span>;<span class="comment">//10</span></span><br><span class="line">    </span><br><span class="line"><span class="comment">//调用方式二调用的函数</span></span><br><span class="line"><span class="title function_">abs</span>(-<span class="number">10</span>)；<span class="comment">//10</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li>参数问题<ul>
<li>参数问题：javaScript可以传任意个参数，也可以不传递参数~</li>
<li>参数进来是否存在问题？</li>
<li>假设不存在参数，如何规避？</li>
</ul>
</li>
</ul>
<h3 id="函数自带参数（arguments）"><a href="#函数自带参数（arguments）" class="headerlink" title="函数自带参数（arguments）"></a>函数自带参数（arguments）</h3><ul>
<li><p>arguments是一个JS免费赠送的关键字；代表，传递进来的所有参数，是一个数组！（和Java中main方法中的args数组差不多）</p>
</li>
<li><p>如果传入的参数的值超过自定义的参数的个数，那么超过的参数就会被自动封装成为一个数组，这个数组的名字为arguments，使用方法和自己定义的数组的方式一样</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> abs = <span class="keyword">function</span>(<span class="params">x</span>)&#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;x = &quot;</span> + x);</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> <span class="variable language_">arguments</span> )&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(i);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(x&gt;<span class="number">0</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> x;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> -x;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li>使用arguments参数会有问题，argumens会把所有的参数都封装成为一个数组</li>
</ul>
<h3 id="可变形参（…rest）"><a href="#可变形参（…rest）" class="headerlink" title="可变形参（…rest）"></a>可变形参（…rest）</h3><p><strong>rest参数只能写在所哟参数的最后面，必须用…标识。</strong></p>
<p>ES6引入的新特性，获取除了已经定义的参数之外的所有参数</p>
<p>获取除了已经定义的参数之外的所有参数</p>
<p>多出来的参数会自动封装成为一个数组</p>
<ul>
<li>```javascript<br>  function abs(a,b,…rest){<pre><code>  console.log(a);
  console.log(b);
  console.log(rest);
</code></pre>  }  <figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">### arguments和rest的区别</span><br><span class="line"></span><br><span class="line">arguments会把所有的参数的值都封装成为一个数组，就算自己定义了形参，形参接收到了值，但是arguments也会把所有参数都封装成为一个数组</span><br><span class="line"></span><br><span class="line">rest和arguments的区别就是，他会把获取除了已经定义的参数之外的所有参数</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">```JavaScript</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">abs</span><span class="params">(x, y)</span> &#123;</span></span><br><span class="line">    <span class="built_in">let</span> <span class="built_in">str</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="built_in">let</span> i of arguments) &#123;</span><br><span class="line">        <span class="built_in">str</span> = <span class="built_in">str</span> + i + <span class="string">&quot; &quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    console.<span class="built_in">log</span>(<span class="string">&quot;arguments = &quot;</span> + <span class="built_in">str</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">for_ary</span><span class="params">(x, y, ...args)</span> &#123;</span></span><br><span class="line">    <span class="built_in">let</span> <span class="built_in">str</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="built_in">let</span> i of args) &#123;</span><br><span class="line">        <span class="built_in">str</span> = <span class="built_in">str</span> + i + <span class="string">&quot; &quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    console.<span class="built_in">log</span>(<span class="string">&quot;rest = &quot;</span> + <span class="built_in">str</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">abs</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>);<span class="comment">//arguments = 1 2 3 4 5 6 7 8</span></span><br><span class="line">for_ary(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>);<span class="comment">//rest = 3 4 5 6 7 8</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="2、变量的作用域"><a href="#2、变量的作用域" class="headerlink" title="2、变量的作用域"></a>2、变量的作用域</h2><p>在javascript中，var定义变量实际是有作用域的。</p>
<p>假设在函数体内声明，则在函数体外不可以使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">let</span> x = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line">x = x + <span class="number">2</span>;<span class="comment">//x is not defined</span></span><br></pre></td></tr></table></figure>
<p>如果两个函数使用了相同的变量名，只要在函数内部就不冲突</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">let</span> x = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">abs2</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">let</span> x = <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>内部函数可以访问外部函数的成员，反之则不行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> x = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">abs2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> y = x + <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> z = x + y;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">abs</span>();<span class="comment">// y is not defined</span></span><br></pre></td></tr></table></figure>
<p>假设，内部函数变量和外部函数变量，重名！</p>
<p>假设在JavaScript中，函数查找变量从自身函数开始~， <strong>由“内”向“外”查找变量</strong>，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> x = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">abs2</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> x = <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> z = x + <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>JavaScript会自动提升变量的作用域：</p>
<ul>
<li>参数的调用可以在定义之前调用但必须要定义</li>
<li>JavaScript会把变量层级提到最前面，但是不会把变量值放到最前面，此时在定义之前调用参数会报初始化之前无法访问</li>
<li>这是个在JavaScript建立之初就存在的。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>  <span class="title function_">abs</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;y = &quot;</span> + y);</span><br><span class="line">    <span class="keyword">var</span> y = <span class="number">11</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//此时调用不是报未定义了，而是报：初始化之前无法访问</span></span><br><span class="line"><span class="title function_">abs</span>(<span class="number">1</span>); <span class="comment">// Cannot access &#x27;x&#x27; before initialization</span></span><br></pre></td></tr></table></figure>
<p>全局变量：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">abs</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;我在函数内部调用全局变量：&quot;</span> + a);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">abs</span>();<span class="comment">//我在函数内部调用全局变量：10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;我在函数外面调用全局变量：&quot;</span> + a);<span class="comment">//我在函数外面调用全局变量：10</span></span><br></pre></td></tr></table></figure>
<p>全局对象：默认所有的全局变量dou’hui绑定在Windows对象下面；</p>
<ul>
<li>alert() 这个函数本身也是一个window的变量；</li>
<li>javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 <strong>Refrence</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> x = <span class="string">&quot;AAA&quot;</span>;</span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">alert</span>(x);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*将全局变量Windows对象中的alert变量赋值给一个自定义变量，这个自定义变量也有alert的功能*/</span></span><br><span class="line"><span class="keyword">let</span> new_alert = <span class="variable language_">window</span>.<span class="property">alert</span>;</span><br><span class="line"><span class="title function_">new_alert</span>(<span class="string">&quot;new_alert = &quot;</span> + x);</span><br><span class="line"></span><br><span class="line"><span class="comment">//将一个空函数赋值给全局变量Windows，此时的alert将会失效</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">alert</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//此时运行如下代码不会输出</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;你猜我会不会输出呢&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//恢复原来的Windows中的alert变量的值，此时下面的代码就能实现之前的功能了</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="property">alert</span> = new_alert;</span><br><span class="line"><span class="title function_">alert</span>(<span class="string">&quot;你猜我输出没有呢！！！！&quot;</span>);</span><br></pre></td></tr></table></figure>
<p>规范</p>
<ul>
<li><p>由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—&gt;如何减少这样的冲突？</p>
</li>
<li><p>把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~jQuery中就是使用的该方法：jQuery.name，简便写法：<strong>$()</strong></p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//唯一全局变量</span></span><br><span class="line"><span class="keyword">let</span> lf = &#123;&#125;;</span><br><span class="line"><span class="comment">//将自定义全局变量绑定在全局变量中，可以避免个系统中的全局变量冲突</span></span><br><span class="line">lf.<span class="property">name</span> = <span class="string">&quot;韩信&quot;</span>;</span><br><span class="line">lf.<span class="property">id</span> = <span class="number">1233</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>局部变量：ES6的let关键字，解决了局部作用域冲突的问题！建议大家都用let去定义局部作用域的变量；</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//正常如下代码应该要报错误，但是这里还能访问到for循环中定义的i，所以这是就需要使用let定义变量了</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(i);<span class="comment">//   10  for循环结束后i的值变为了10</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> x = <span class="number">0</span>; x &lt; <span class="number">10</span>; x++) &#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里使用了let定义变量，let严格要求了定义的变量的作用域</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(x);<span class="comment">//x is not defined</span></span><br></pre></td></tr></table></figure>
<p>常量：定义了时候，值是不能修改的</p>
<ul>
<li><p>在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。</p>
</li>
<li><p>在ES6引入了常量关键字 const，使用const定义的变量必须赋值，且赋值之后不能改变</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在ES6之前定义常量，</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">ES6</span>_AFTER_PI = <span class="string">&quot;3.14&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//ES6引入了const，此时可以用该关键字定义常量</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ES6</span>_PI = <span class="string">&quot;3.1415&quot;</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="3、方法"><a href="#3、方法" class="headerlink" title="3、方法"></a>3、方法</h2><h3 id="定义方法"><a href="#定义方法" class="headerlink" title="定义方法"></a>定义方法</h3><p>方法就是<strong>把函数放在对象的里面</strong>，对象只有两个东西：属性和方法</p>
<p>定义方式一：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">对象相当于Java中的类</span></span><br><span class="line"><span class="comment">对象中有：属性、方法</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="number">2001</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//方法，time为方法的返回值</span></span><br><span class="line">    <span class="comment">//相当于 let time = function()&#123; ... &#125; </span></span><br><span class="line">    <span class="comment">//调用方法为：time()</span></span><br><span class="line">    <span class="attr">time</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getFullYear</span>();</span><br><span class="line"></span><br><span class="line">        <span class="comment">//方法中调用属性：birth</span></span><br><span class="line">    	<span class="keyword">return</span> now - <span class="variable language_">this</span>.<span class="property">birth</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用属性</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="property">name</span>);<span class="comment">//张三</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//调用方法（属性名后面一定要带()）：对象名.属性名()</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="title function_">time</span>());<span class="comment">//20</span></span><br></pre></td></tr></table></figure>
<p>定义方式二：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    对象相当于Java中的类</span></span><br><span class="line"><span class="comment">    对象中有：属性、方法</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="number">2001</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//方法，time为方法的返回值</span></span><br><span class="line">    <span class="attr">time</span>: getTime</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getTime</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getFullYear</span>();</span><br><span class="line">    <span class="comment">//方法中调用属性：birth</span></span><br><span class="line">    <span class="keyword">return</span> now - <span class="variable language_">this</span>.<span class="property">birth</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用属性</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="property">name</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用方法（属性名后面一定要带()）：对象名.属性名()</span></span><br><span class="line"><span class="title function_">alert</span>(<span class="title class_">Person</span>.<span class="title function_">time</span>());<span class="comment">//20</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//直接调用getTime()方法，不通过对象调用，此时的this是window，但是window中没有birth，所以返沪NaN</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">getTime</span>());<span class="comment">//NaN</span></span><br></pre></td></tr></table></figure>
<ul>
<li>上面代码中用到了 this。那么this代表什么？<ul>
<li><strong>谁调用谁就是this，上诉代码，单独调用函数，由于window中没有birth属性，所以this调用的时候是没有值的，所以直接调用的话返回的是NaN</strong></li>
<li><strong>只要调用者调用的地方没有就会返回NaN</strong></li>
</ul>
</li>
</ul>
<p>apply：可以通过apply指定指向哪个对象</p>
<ul>
<li><p><strong>和Java中的反射的功能有点类似，传入的是哪个对象，那么此时里面就是哪个对象</strong></p>
</li>
<li><p>在js中可以控制this指向</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    对象相当于Java中的类</span></span><br><span class="line"><span class="comment">    对象中有：属性、方法</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="number">2001</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//方法，time为方法的返回值</span></span><br><span class="line">    <span class="attr">time</span>: getTime</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> xiaoming = &#123;</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;小明&quot;</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="number">2010</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//方法，time为方法的返回值</span></span><br><span class="line">    <span class="attr">time</span>: getTime</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getTime</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getFullYear</span>();</span><br><span class="line">    <span class="comment">//方法中调用属性：birth</span></span><br><span class="line">    <span class="keyword">return</span> now - <span class="variable language_">this</span>.<span class="property">birth</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//使用apply()方法</span></span><br><span class="line"><span class="comment">//使用如下方法，那么第一个参数传入什么，this就会指向哪个对象，第二个参数为参数</span></span><br><span class="line"><span class="comment">//如下解释：传入了Person对象，this指向了Person，参数为空</span></span><br><span class="line"><span class="title function_">alert</span>(getTime.<span class="title function_">apply</span>(<span class="title class_">Person</span>,[])); <span class="comment">// 20 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">//传入xiaoming对象，此时this会指向xiaoming，参数为空</span></span><br><span class="line"><span class="title function_">alert</span>(getTime.<span class="title function_">apply</span>(xiaoming,[])); <span class="comment">// 11</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="4、闭包函数"><a href="#4、闭包函数" class="headerlink" title="4、闭包函数"></a>4、闭包函数</h2><p>想要了解上百度查询</p>
<h1 id="五、内部对象"><a href="#五、内部对象" class="headerlink" title="五、内部对象"></a>五、内部对象</h1><h2 id="1、对象类别的测试"><a href="#1、对象类别的测试" class="headerlink" title="1、对象类别的测试"></a>1、对象类别的测试</h2><p>使用typeof：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="number">123</span>);<span class="comment">//number</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="string">&#x27;123&#x27;</span>);<span class="comment">//string</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="literal">true</span>);<span class="comment">//boolean</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="title class_">NaN</span>);<span class="comment">//number</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> []);<span class="comment">//object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> &#123;&#125;);<span class="comment">//object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="title class_">Math</span>.<span class="title function_">abs</span>());<span class="comment">//number</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">typeof</span> <span class="literal">undefined</span>);<span class="comment">//undefined</span></span><br></pre></td></tr></table></figure>
<h2 id="2、Date使用"><a href="#2、Date使用" class="headerlink" title="2、Date使用"></a>2、Date使用</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//基本使用</span></span><br><span class="line"><span class="keyword">let</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(now);<span class="comment">//Mon Mar 22 2021 22:25:20 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;年 = &quot;</span> + now.<span class="title function_">getFullYear</span>());<span class="comment">//年 = 2020</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;月 = &quot;</span> + now.<span class="title function_">getMonth</span>());<span class="comment">//月 = 2</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;日 = &quot;</span> + now.<span class="title function_">getDate</span>());<span class="comment">//日 = 22</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;时 = &quot;</span> + now.<span class="title function_">getHours</span>());<span class="comment">//时 = 22</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;分 = &quot;</span> + now.<span class="title function_">getMinutes</span>());<span class="comment">//分 = 22</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;秒 = &quot;</span> + now.<span class="title function_">getSeconds</span>());<span class="comment">//秒 = 22</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;时间戳 = &quot;</span> + now.<span class="title function_">getTime</span>());<span class="comment">//时间戳 = 1616423287299</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;时间戳转换的时间 = &quot;</span> + <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">1616423287299</span>));<span class="comment">//时间戳转换的时间 = Mon Mar 22 2021 22:28:07 GMT+0800 (中国标准时间)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//转换</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;======================转换=====================================&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;当前时间 = &quot;</span> + now.<span class="title function_">toLocaleString</span>())<span class="comment">//当前时间 = 2020/3/22下午10:33:51</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;当前GMT时间 = &quot;</span> + now.<span class="title function_">toGMTString</span>())<span class="comment">//当前GMT时间 = Mon, 22 Mar 2021 14:35:58 GMT</span></span><br></pre></td></tr></table></figure>
<h2 id="3、JSON"><a href="#3、JSON" class="headerlink" title="3、JSON"></a>3、JSON</h2><p>具体使用在JavaWeb和SpringMVC的笔记中有使用方式</p>
<p>JSON是什么</p>
<ul>
<li>JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。</li>
<li>采用完全独立于编程语言的<strong>文本格式</strong>来存储和表示数据。</li>
<li>简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。</li>
<li>易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。</li>
</ul>
<p>在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示</p>
<ul>
<li>格式<ul>
<li>对象都用{}</li>
<li>数组都用[]</li>
<li>所有的键值对 都是用key:value</li>
</ul>
</li>
</ul>
<ul>
<li>JSON.stringify()         把 json 对象转换成为 json 字符串 </li>
<li>JSON.parse()         把 json 字符串转换成为 json 对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">3</span>,</span><br><span class="line">    <span class="attr">sex</span>: <span class="string">&quot;男&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Person</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//JSON.stringify() 		把 json 对象转换成为 json 字符串</span></span><br><span class="line"><span class="keyword">let</span> jsonPerson = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(<span class="title class_">Person</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(jsonPerson)</span><br><span class="line"></span><br><span class="line"><span class="comment">//JSON.parse() 		把 json 字符串转换成为 json 对象</span></span><br><span class="line"><span class="keyword">let</span> personObject = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(jsonPerson);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(personObject);</span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>JSON和JS对象的区别</strong>：</p>
<ul>
<li>JSON是字符串</li>
<li><p>JS对象是对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//对象：对象不是字符串。格式：</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Person</span> = &#123;<span class="attr">name</span>:<span class="string">&quot;张三&quot;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//JSON：JSON是一个字符串</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Person</span> = <span class="string">&#x27;&#123;&quot;name&quot;:&quot;张三&quot;,&quot;gender&quot;:&quot;男&quot;&#125;&#x27;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h2 id="4、BSON"><a href="#4、BSON" class="headerlink" title="4、BSON"></a>4、BSON</h2><p>想要了解去百度</p>
<h2 id="5、AJAX"><a href="#5、AJAX" class="headerlink" title="5、AJAX"></a>5、AJAX</h2><ul>
<li>原生的js写法 xhr异步请求</li>
<li>jQuery封装好的方法$(#name).ajax(“”)</li>
<li>axios请求</li>
</ul>
<h1 id="六、面向对象编程"><a href="#六、面向对象编程" class="headerlink" title="六、面向对象编程"></a>六、面向对象编程</h1><h2 id="1、原型对象"><a href="#1、原型对象" class="headerlink" title="1、原型对象"></a>1、原型对象</h2><p>原型对象：javascript、java、c#———面向对象；但是javascript有些区别！</p>
<ul>
<li>类：类是一个模板，可以写一个类（相当于Java中的接口），给其他类来继承</li>
<li>对象：具体实例</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*对象相当于Java中的类</span></span><br><span class="line"><span class="comment">对象中有：属性、方法*/</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">Person</span> = &#123;</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span>,</span><br><span class="line">    <span class="attr">birth</span>: <span class="number">2001</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//方法，time为方法的返回值</span></span><br><span class="line">    <span class="attr">time</span>: getTime</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getTime</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> now = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getFullYear</span>();</span><br><span class="line">    <span class="comment">//方法中调用属性：birth</span></span><br><span class="line">    <span class="keyword">return</span> now - <span class="variable language_">this</span>.<span class="property">birth</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> man = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;男人&quot;</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//原型对象、相当于继承</span></span><br><span class="line">man.<span class="property">__proto__</span> = <span class="title class_">Person</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//man中没有time属性，但是继承了Person，所以man中也有了该属性了</span></span><br><span class="line">man.<span class="title function_">time</span>();<span class="comment">//20</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Student</span>(<span class="params">name</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//新增一个方法</span></span><br><span class="line"><span class="title class_">Student</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">hello</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Say Hello&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//创造啊一个Student对象</span></span><br><span class="line"><span class="keyword">let</span> student = <span class="keyword">new</span> <span class="title class_">Student</span>(<span class="string">&quot;张三&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//调用新增的方法</span></span><br><span class="line">student.<span class="title function_">hello</span>();</span><br></pre></td></tr></table></figure>
<h2 id="2、class创建对象"><a href="#2、class创建对象" class="headerlink" title="2、class创建对象"></a>2、class创建对象</h2><p>class关键字，是在ES6引入的</p>
<ul>
<li>定义一个类、属性、方法：（如下理解是建立在Java的角度上理解的）<ul>
<li>JavaScript中只能定义一个构造函数，传入的参数会封装在arguments中，在前面有arguments的解释</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//创造一个构造函数，并且添加一个属性：name</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在说：&quot;</span> + <span class="variable language_">arguments</span>[<span class="number">1</span>]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//定义一个方法</span></span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在跑步&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建一个人的对象</span></span><br><span class="line"><span class="keyword">let</span> person = <span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&quot;张三&quot;</span>, <span class="string">&quot;英语&quot;</span>);<span class="comment">//张三在说：英语</span></span><br><span class="line">person.<span class="title function_">run</span>();<span class="comment">//张三在跑步</span></span><br></pre></td></tr></table></figure>
<h2 id="3、class继承"><a href="#3、class继承" class="headerlink" title="3、class继承"></a>3、class继承</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//创造一个构造函数，并且添加一个属性：name</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在说：&quot;</span> + <span class="variable language_">arguments</span>[<span class="number">1</span>]);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//定义一个方法</span></span><br><span class="line">    <span class="title function_">run</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在跑步&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Man</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name, food</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;父类和谁先执行：谁在前面谁先执行&quot;</span>)</span><br><span class="line">        <span class="comment">//super关键字前面不能有this：否则会报错（超类构造函数调用前不允许有 &#x27;&#x27;this&#x27;）</span></span><br><span class="line">        <span class="comment">//此处传不传参数都不会报错误，但最好父类中的构造函数有几个参数就传几个参数</span></span><br><span class="line">        <span class="variable language_">super</span>(name);</span><br><span class="line"></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">food</span> = food;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">eat</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">name</span> + <span class="string">&quot;在吃&quot;</span> + <span class="variable language_">this</span>.<span class="property">food</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建一个Person的子类Man，因为子类中使用了super，所以在子类在创建对象时还会调用父类的构造方法</span></span><br><span class="line"><span class="keyword">let</span> man = <span class="keyword">new</span> <span class="title class_">Man</span>(<span class="string">&quot;李白&quot;</span>, <span class="string">&quot;豆腐&quot;</span>);</span><br><span class="line"><span class="comment">/*		创建对象的时候输出的东西：</span></span><br><span class="line"><span class="comment">李白在说：undefined</span></span><br><span class="line"><span class="comment">父类和谁先执行：谁在前面谁先执行</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">man.<span class="title function_">eat</span>();<span class="comment">//李白在吃豆腐</span></span><br></pre></td></tr></table></figure>
<h2 id="3、JavaScript继承原型链"><a href="#3、JavaScript继承原型链" class="headerlink" title="3、JavaScript继承原型链"></a>3、JavaScript继承原型链</h2><p><img src= "" data-lazy-src="https://www.naste.top:9000/webp/JavaScript%E7%BB%A7%E6%89%BF%E5%8E%9F%E5%9E%8B%E9%93%BE.webp" alt="image-20210323141922732"></p>
<h1 id="七、操作BOM对象（重点）"><a href="#七、操作BOM对象（重点）" class="headerlink" title="七、操作BOM对象（重点）"></a>七、操作BOM对象（重点）</h1><h2 id="1、浏览器介绍"><a href="#1、浏览器介绍" class="headerlink" title="1、浏览器介绍"></a>1、浏览器介绍</h2><p>BOM：浏览器对象模型</p>
<p>javascript和浏览器关系？：JavaScript诞生就是为了能够让他在浏览器中运行</p>
<h2 id="2、window对象（重要）"><a href="#2、window对象（重要）" class="headerlink" title="2、window对象（重要）"></a>2、window对象（重要）</h2><ul>
<li>具体的使用可以去w3c查询使用方法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="property">innerHeight</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="property">innerWidth</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="property">outerHeight</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="property">outerWidth</span>);</span><br></pre></td></tr></table></figure>
<h2 id="3、Navigator（不建议使用）"><a href="#3、Navigator（不建议使用）" class="headerlink" title="3、Navigator（不建议使用）"></a>3、Navigator（不建议使用）</h2><p>Navigator封装了浏览器的信息</p>
<ul>
<li>大多数时候，我们不会使用navigator对象，因为Navigator中的信息可以被用户修改</li>
<li>不建议使用这些属性来判断和编写代码</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(navigator.<span class="property">appName</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(navigator.<span class="property">appVersion</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(navigator.<span class="property">userAgent</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(navigator.<span class="property">platform</span>);</span><br></pre></td></tr></table></figure>
<h2 id="4、screen"><a href="#4、screen" class="headerlink" title="4、screen"></a>4、screen</h2><p>代表屏幕尺寸</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(screen.<span class="property">width</span>);<span class="comment">//1920</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(screen.<span class="property">height</span>);<span class="comment">//1080</span></span><br></pre></td></tr></table></figure>
<h2 id="5、location-重要"><a href="#5、location-重要" class="headerlink" title="5、location(重要)"></a>5、location(重要)</h2><p>location代表当前页面的URL信息</p>
<ul>
<li>部分属性和方法值：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 返回Location对象的URL的主机和端口（如果与方案的默认端口不同）。</span></span><br><span class="line"><span class="comment">* Can be set, to navigate to the same URL with a changed host and port.</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="attr">host</span>: string;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 返回Location对象的URL。</span></span><br><span class="line"><span class="comment"> * Can be set, to navigate to the given URL.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="attr">href</span>: string;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 返回Location对象的URL方案。</span></span><br><span class="line"><span class="comment"> * Can be set, to navigate to the same URL with a changed scheme.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="attr">protocol</span>: string;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 导航到给定的URL。</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="title function_">assign</span>(<span class="attr">url</span>: string): <span class="keyword">void</span>;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 重新加载当前页面。</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="title function_">reload</span>(): <span class="keyword">void</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>使用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">host</span>);<span class="comment">//返回Location对象的URL的主机和端口（如果与方案的默认端口不同）。</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">href</span>);<span class="comment">//获取当前网页地址，返回Location对象的URL。</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(location.<span class="property">protocol</span>);<span class="comment">//获取网络协议（http或https），返回Location对象的URL方案。</span></span><br><span class="line">location.<span class="title function_">assign</span>(<span class="string">&quot;https://www.baidu.com&quot;</span>);<span class="comment">//重定向到填写的地址，导航到给定的URL。</span></span><br><span class="line">location.<span class="title function_">reload</span>();<span class="comment">//刷新网页，重新加载当前页面。</span></span><br></pre></td></tr></table></figure>
<h2 id="6、history（不建议使用-）"><a href="#6、history（不建议使用-）" class="headerlink" title="6、history（不建议使用 ）"></a>6、history（不建议使用 ）</h2><p>代表浏览器的历史记录</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//前进</span></span><br><span class="line">history.<span class="title function_">back</span>();</span><br><span class="line"><span class="comment">//后退</span></span><br><span class="line">history.<span class="title function_">forward</span>();</span><br></pre></td></tr></table></figure>
<h2 id="7、document（内容DOM）"><a href="#7、document（内容DOM）" class="headerlink" title="7、document（内容DOM）"></a>7、document（内容DOM）</h2><p>document代表当前的页面，HTML DOM文档树</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>.<span class="property">title</span>)<span class="comment">//输出HTML的title中输入的值</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="property">title</span> = <span class="string">&quot;测试&quot;</span> <span class="comment">//修改HTML的title标签中的值</span></span><br></pre></td></tr></table></figure>
<p>获取具体的文档树节点</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span> <span class="attr">id</span>=<span class="string">&quot;aop&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">dt</span>&gt;</span>Java<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">dt</span>&gt;</span>JavaScript<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">let</span> dl = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;aop&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>获取cookie</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="property">cookie</span></span><br></pre></td></tr></table></figure>
<h1 id="八、操作DOM对象（重点）"><a href="#八、操作DOM对象（重点）" class="headerlink" title="八、操作DOM对象（重点）"></a>八、操作DOM对象（重点）</h1><p><strong>DOM：文档对象模型</strong></p>
<p><img src= "" data-lazy-src="https://www.naste.top:9000/webp/DOM%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%9E%8B.webp" alt="image-20210323141922732"></p>
<h2 id="1、核心（节点的增删改查）"><a href="#1、核心（节点的增删改查）" class="headerlink" title="1、核心（节点的增删改查）"></a>1、核心（节点的增删改查）</h2><p>浏览器网页就是一个Dom树形结构！</p>
<ul>
<li>更新：更新Dom节点</li>
<li>遍历Dom节点：得到Dom节点</li>
<li>删除：删除一个Dom节点</li>
<li>添加：添加一个新的节点</li>
</ul>
<p><strong>要操作一个Dom节点，就必须要先获得这个Dom节点</strong></p>
<h2 id="2、获得Dom节点"><a href="#2、获得Dom节点" class="headerlink" title="2、获得Dom节点"></a>2、获得Dom节点</h2><p>原生代码，之后我们尽量使用jQuery</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> h1 = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;h1&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> p1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;p1&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> p2 = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;p2&quot;</span>)</span><br><span class="line"><span class="keyword">let</span> father = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;father&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取父节点下的节点</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(father.<span class="property">children</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(father.<span class="property">firstChild</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(father.<span class="property">lastChild</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(father.<span class="property">lastChild</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(father.<span class="property">nextSibling</span>);</span><br></pre></td></tr></table></figure>
<h2 id="3、更新节点"><a href="#3、更新节点" class="headerlink" title="3、更新节点"></a>3、更新节点</h2><ul>
<li><p>innerText：只能跟新文字，加入HTML代码不会被执行，输入的HTML会被直接输出</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box1.<span class="property">innerText</span> = <span class="string">&quot;测试innerText&quot;</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>innerHTML：不仅能更新文字，<strong>还能在文字上加入HTML代码</strong></p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box1.<span class="property">innerHTML</span> = <span class="string">&quot;&lt;strong&gt;测试innerHTML&lt;/strong&gt;&quot;</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>修改样式</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">box1.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&quot;white&quot;</span>;</span><br><span class="line">box1.<span class="property">style</span>.<span class="property">backgroundColor</span> = <span class="string">&quot;deepskyblue&quot;</span>;</span><br><span class="line">box1.<span class="property">style</span>.<span class="property">width</span> = <span class="string">&quot;100px&quot;</span>;</span><br><span class="line">box1.<span class="property">style</span>.<span class="property">height</span> = <span class="string">&quot;100px&quot;</span>;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="4、删除节点"><a href="#4、删除节点" class="headerlink" title="4、删除节点"></a>4、删除节点</h2><p><strong>删除节点的步骤：先获取父节点，再通过父节点删除自己</strong></p>
<p>因为JavaScript代码是从上到下，所以JavaScript要写在节点的后面，不让会出现JavaScript代码扫描不到节点</p>
<p>注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>操作DOM对象<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;p1&quot;</span>&gt;</span></span><br><span class="line">        要操作一个Dom节点，就必须要先获得这个Dom节点</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;p2&quot;</span>&gt;</span></span><br><span class="line">        使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( )</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> h1 = <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&#x27;h1&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> p1 = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;p1&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> p2 = <span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&#x27;p2&#x27;</span>)</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> father = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;father&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">	</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*删除节点方式一</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    father.removeChild(p1);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    father.removeChild(p2[0]);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    father.removeChild(h1[0]);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/*删除节点方式二，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    father.removeChild(father.children[0]);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    father.removeChild(father.children[0]);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    father.removeChild(father.children[0]);</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="5、插入节点"><a href="#5、插入节点" class="headerlink" title="5、插入节点"></a>5、插入节点</h2><p>我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么了！会产生覆盖</p>
<ul>
<li>覆盖：使用innerHTML</li>
</ul>
<ul>
<li><p>追加：</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;test-first-p&quot;</span>&gt;</span>Java<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaEE&quot;</span>&gt;</span>JavaEE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaSE&quot;</span>&gt;</span>JavaSE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaWeb&quot;</span>&gt;</span>JavaWeb<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> p = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test-first-p&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> list = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;list&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//将第一个p标签追加到div中，原来的节点追加到另外的节点之后，原来的节点位置的值不会再存在</span></span></span><br><span class="line"><span class="language-javascript">    list.<span class="title function_">appendChild</span>(p);</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li>创建一个新的标签节点追加到网页中：</li>
</ul>
<pre><code>- 方式一：使用 ==标签变量.属性名 = 属性值==

    <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;test-first-p&quot;</span>&gt;</span>Java<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaEE&quot;</span>&gt;</span>JavaEE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaSE&quot;</span>&gt;</span>JavaSE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaWeb&quot;</span>&gt;</span>JavaWeb<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> newP = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;p&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    newP.<span class="property">id</span> = <span class="string">&quot;newP&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">    newP.<span class="property">innerHTML</span> = <span class="string">&quot;&lt;strong&gt;我是新创造的p节点&lt;/strong&gt;&quot;</span></span></span><br><span class="line"><span class="language-javascript">    list.<span class="title function_">appendChild</span>(newP);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



- 方式二：使用==setAttribute(&quot;属性名&quot;,&quot;属性值&quot;)==

    <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> newP = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;p&quot;</span>);</span><br><span class="line">newP.<span class="title function_">setAttribute</span>(<span class="string">&quot;id&quot;</span>, <span class="string">&quot;newP&quot;</span>);</span><br><span class="line">newP.<span class="property">innerHTML</span> = <span class="string">&quot;&lt;strong&gt;我是新创造的p节点&lt;/strong&gt;&quot;</span></span><br><span class="line">list.<span class="title function_">appendChild</span>(newP);</span><br></pre></td></tr></table></figure>



- 方式三：

    <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">	<span class="keyword">var</span> js = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;js&#x27;</span>);<span class="comment">//已经存在的节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> list = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;list&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//通过JS创建一个新的节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> newP = <span class="variable language_">document</span>.<span class="title function_">creatElement</span>(<span class="string">&#x27;p&#x27;</span>);<span class="comment">//创建一个p标签</span></span></span><br><span class="line"><span class="language-javascript">    newP.<span class="property">id</span> = <span class="string">&#x27;newP&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">    newP.<span class="property">innerText</span> = <span class="string">&#x27;Hello,Kuangshen&#x27;</span>;</span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//创建一个标签节点</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> myScript = <span class="variable language_">document</span>.<span class="title function_">creatElement</span>(<span class="string">&#x27;script&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    myScript.<span class="title function_">setAttribute</span>(<span class="string">&#x27;type&#x27;</span>,<span class="string">&#x27;text/javascript&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="comment">//可以创建一个style标签</span></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> myStyle = <span class="variable language_">document</span>.<span class="title function_">creatElement</span>(<span class="string">&#x27;style&#x27;</span>);<span class="comment">//创建了一个空style标签</span></span></span><br><span class="line"><span class="language-javascript">    myStyle.<span class="title function_">setAttribute</span>(<span class="string">&#x27;type&#x27;</span>,<span class="string">&#x27;text/css&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    myStyle.<span class="property">innerHTML</span> = <span class="string">&#x27;body&#123;background-color:chartreuse;&#125;&#x27;</span>;<span class="comment">//设置标签内容</span></span></span><br><span class="line"><span class="language-javascript">    </span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">getElementByTagName</span>(<span class="string">&#x27;head&#x27;</span>)[<span class="number">0</span>].<span class="title function_">appendChild</span>(myStyle);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</code></pre><h2 id="7、insertBefore（元素前插入）"><a href="#7、insertBefore（元素前插入）" class="headerlink" title="7、insertBefore（元素前插入）"></a>7、insertBefore（元素前插入）</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//参数一：要插入的新的节点</span></span><br><span class="line"><span class="comment">//参数二：本来就有的节点</span></span><br><span class="line"><span class="comment">//作用：需要将新的节点插入在原来的节点的后边，如下为将newP节点插入在JavaSE节点的后面</span></span><br><span class="line">list.<span class="title function_">insertBefore</span>(newP, <span class="title class_">JavaSE</span>);</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;test-first-p&quot;</span>&gt;</span>Java<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaEE&quot;</span>&gt;</span>JavaEE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaSE&quot;</span>&gt;</span>JavaSE<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;JavaWeb&quot;</span>&gt;</span>JavaWeb<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> list = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;list&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> <span class="title class_">JavaSE</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;JavaSE&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">let</span> newP = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;p&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    newP.<span class="title function_">setAttribute</span>(<span class="string">&quot;id&quot;</span>, <span class="string">&quot;newP&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">    newP.<span class="property">innerHTML</span> = <span class="string">&quot;&lt;strong&gt;我是新创造的p节点&lt;/strong&gt;&quot;</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    list.<span class="title function_">insertBefore</span>(newP, <span class="title class_">JavaSE</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="九、操作表单"><a href="#九、操作表单" class="headerlink" title="九、操作表单"></a>九、操作表单</h1><h2 id="1、表单是什么"><a href="#1、表单是什么" class="headerlink" title="1、表单是什么"></a>1、表单是什么</h2><p>表单是什么？：form——-DOM树</p>
<p>表单的目的：提交信息</p>
<ul>
<li>文本框——text</li>
<li>下拉框——select</li>
<li>单选框——radio</li>
<li>多选框——checkbox</li>
<li>隐藏域——hidden</li>
<li>密码框——password</li>
<li>…</li>
</ul>
<h2 id="2、获得要提交的信息"><a href="#2、获得要提交的信息" class="headerlink" title="2、获得要提交的信息"></a>2、获得要提交的信息</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">onsubmit</span>=<span class="string">&quot;&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;username&quot;</span>&gt;</span>用户名：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;password&quot;</span>&gt;</span>用户名：<span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">id</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">submitTest</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> username = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;username&quot;</span>).<span class="property">value</span>;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> password = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;password&quot;</span>).<span class="property">value</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(username);<span class="comment">//输出用户名</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(password);<span class="comment">//输出密码</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">      </span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="3、提交表单。md5加密密码，表单优化"><a href="#3、提交表单。md5加密密码，表单优化" class="headerlink" title="3、提交表单。md5加密密码，表单优化"></a>3、提交表单。md5加密密码，表单优化</h2><ul>
<li>提交表单：在form标签中有个属性onsubmit，如果填入return false可以阻止表单的提交</li>
<li>md5加密：需要使用md5的代码将表单输入的密码传入给md5<ul>
<li>将正确密码保存到一个隐藏域中，通过隐藏域进行提交</li>
</ul>
</li>
<li>使用onsubmit属性来控制表单的提交</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">onsubmit</span>=<span class="string">&quot;return submitTest()&quot;</span> <span class="attr">method</span>=<span class="string">&quot;post&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;username&quot;</span>&gt;</span>用户名：<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">id</span>=<span class="string">&quot;username&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;password&quot;</span>&gt;</span>用户名：</span><br><span class="line">    <span class="tag">&lt;/<span class="name">label</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">id</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;hidden&quot;</span> <span class="attr">id</span>=<span class="string">&quot;hidden-password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;提交&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--MD5加密工具类--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">function</span> <span class="title function_">submitTest</span>(<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> username = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;username&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> password = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;password&quot;</span>);</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">let</span> hidden_password = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;hidden-password&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//将输入的密码保存到隐藏域中，通过隐藏域提交表单</span></span></span><br><span class="line"><span class="language-javascript">        hidden_password.<span class="property">value</span> = <span class="title function_">md5</span>(password.<span class="property">value</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">if</span> (password.<span class="property">value</span> === <span class="string">&quot;123456&quot;</span> &amp;&amp; username.<span class="property">value</span> === <span class="string">&quot;admin&quot;</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//用户名和密码输入满足条件，返回true，提交表单</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> <span class="literal">true</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//用户名和密码不满足条件按返回false，不提交表单</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript">        &#125;</span></span><br><span class="line"><span class="language-javascript">    &#125;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="十、jQuery"><a href="#十、jQuery" class="headerlink" title="十、jQuery"></a>十、jQuery</h1><p>javaScript和jQuery的关系？</p>
<p>jQuery库，里面存在大量的JavaScript函数</p>
<h2 id="1、获取jQuery"><a href="#1、获取jQuery" class="headerlink" title="1、获取jQuery"></a>1、获取jQuery</h2><p>去jQuery官网下载</p>
<p><strong>jQuery的使用公式：$(selector).action()</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">公式：$(select).action()</span></span><br><span class="line"><span class="comment">公式：$(选择器).事件（点击事件、失去焦点事件等）()</span></span><br><span class="line"><span class="comment">使用：jQuery的使用公式：$(selector).action()</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//JavaScript中的点击事件</span></span><br><span class="line"><span class="keyword">let</span> clickTest = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;jquery-test&quot;</span>);</span><br><span class="line">clickTest.<span class="property">onclick</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;123&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//jQuery中的点击事件</span></span><br><span class="line"><span class="comment">//选择器(select)：css中的选择器，action：绑定事件</span></span><br><span class="line">$(<span class="string">&#x27;#jquery-test&#x27;</span>).<span class="title function_">click</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;弹出来&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="2、选择器"><a href="#2、选择器" class="headerlink" title="2、选择器"></a>2、选择器</h2><p><strong>CSS中的选择器在jQuery中都能使用</strong></p>
<p>API网址：<a target="_blank" rel="noopener" href="http://jquery.cuishifeng.cn/">http://jquery.cuishifeng.cn/</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//标签选择器</span></span><br><span class="line"><span class="comment">//id选择器</span></span><br><span class="line"><span class="comment">//类选择器</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//原生JavaScript</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByClassName</span>(<span class="string">&quot;&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//jQuery，css中的选择器这里全部能使用</span></span><br><span class="line">$(<span class="string">&quot;p&quot;</span>).<span class="title function_">click</span>();</span><br><span class="line">$(<span class="string">&quot;#pId&quot;</span>).<span class="title function_">click</span>();</span><br><span class="line">$(<span class="string">&quot;.pClass&quot;</span>).<span class="title function_">click</span>();</span><br></pre></td></tr></table></figure>
<h2 id="3、事件"><a href="#3、事件" class="headerlink" title="3、事件"></a>3、事件</h2><p>鼠标事件、键盘事件，其他事件</p>
<ul>
<li><p>鼠标事件</p>
<p>  <img src= "" data-lazy-src="https://www.naste.top:9000/webp/%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.webp" alt="image-20210323141922732"></p>
</li>
<li><p>简单使用：</p>
  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>jQuery事件<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">            <span class="selector-id">#divMove</span> &#123;</span></span><br><span class="line"><span class="language-css">                <span class="attribute">width</span>  : <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">                <span class="attribute">height</span> : <span class="number">500px</span>;</span></span><br><span class="line"><span class="language-css">                <span class="attribute">border</span> : <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="language-css">            &#125;</span></span><br><span class="line"><span class="language-css">        </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        mouse：<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;mouseMove&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;divMove&quot;</span>&gt;</span></span><br><span class="line">            在这里移动鼠标试试</span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../js/jquery-3.6.0.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//当页面加载完</span></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// $(document).read(function () &#123;  &#125;);</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//当页面加载完成的简写</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                $(<span class="string">&quot;#divMove&quot;</span>).<span class="title function_">mousemove</span>(<span class="keyword">function</span> (<span class="params">e</span>) &#123;</span></span><br><span class="line"><span class="language-javascript">                    $(<span class="string">&quot;#mouseMove&quot;</span>).<span class="title function_">text</span>(<span class="string">&quot;x：&quot;</span> + e.<span class="property">pageX</span> + <span class="string">&quot;====y：&quot;</span> + e.<span class="property">pageY</span>);</span></span><br><span class="line"><span class="language-javascript">                &#125;);</span></span><br><span class="line"><span class="language-javascript">            &#125;);</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//获取鼠标</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="4、操作DOM"><a href="#4、操作DOM" class="headerlink" title="4、操作DOM"></a>4、操作DOM</h2><ul>
<li>文本的操作</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>操作DOM<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;test-ul&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;js&quot;</span>&gt;</span>JavaScript<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">name</span>=<span class="string">&quot;jQuery&quot;</span>&gt;</span>jQuery<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">name</span>=<span class="string">&quot;Vue&quot;</span>&gt;</span>Vue<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../js/jquery-3.6.0.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//选择id为 test-ul 下的所有 li 且 li 中有属性为 name 且属性的值为 jQuery的文档</span></span></span><br><span class="line"><span class="language-javascript">            <span class="keyword">let</span> str = <span class="string">&quot;#test-ul li[name=&#x27;jQuery&#x27;]&quot;</span>;</span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;修改之前的值为：&quot;</span> + $(str).<span class="title function_">text</span>());<span class="comment">//查询值</span></span></span><br><span class="line"><span class="language-javascript">            $(str).<span class="title function_">text</span>(<span class="string">&quot;修改了吗&quot;</span>);<span class="comment">//修改值</span></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;修改之后的值为：&quot;</span> + $(str).<span class="title function_">text</span>());<span class="comment">//查询值</span></span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;修改之前的值为：&quot;</span> + $(<span class="string">&quot;#test-ul&quot;</span>).<span class="title function_">html</span>());<span class="comment">//查询值</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;#test-ul&quot;</span>).<span class="title function_">html</span>(<span class="string">&quot;&lt;strong&gt;JavaScript&lt;/strong&gt;&quot;</span>);<span class="comment">//修改值</span></span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>CSS的操作</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>操作CSS<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;test-div&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;../js/jquery-3.6.0.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//写一条CSS语句</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;#test-div&quot;</span>).<span class="title function_">css</span>(<span class="string">&quot;background-color&quot;</span>,<span class="string">&quot;deepskyblue&quot;</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//同时写多条css语句</span></span></span><br><span class="line"><span class="language-javascript">            $(<span class="string">&quot;#test-div&quot;</span>).<span class="title function_">css</span>(&#123;<span class="string">&quot;height&quot;</span>: <span class="string">&quot;100px&quot;</span>, <span class="string">&quot;width&quot;</span>: <span class="string">&quot;100px&quot;</span>&#125;)</span></span><br><span class="line"><span class="language-javascript">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>元素的显示和隐藏，：本质display:none</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&#x27;#test-ul li[name=python]&#x27;</span>).<span class="title function_">show</span>();</span><br><span class="line">$(<span class="string">&#x27;#test-ul li[name=python]&#x27;</span>).<span class="title function_">hide</span>();</span><br></pre></td></tr></table></figure>
<ul>
<li>测试其他：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="variable language_">window</span>).<span class="title function_">width</span>()</span><br><span class="line">$(<span class="variable language_">window</span>).<span class="title function_">height</span>()</span><br><span class="line">$(<span class="string">&#x27;#test-ul li[name=python]&#x27;</span>).<span class="title function_">toggle</span>();</span><br></pre></td></tr></table></figure>
<ul>
<li>Ajax</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&#x27;#form&#x27;</span>).<span class="title function_">ajax</span>()</span><br><span class="line"></span><br><span class="line">$.<span class="title function_">ajax</span>(&#123;<span class="attr">url</span>:<span class="string">&quot;test.html&quot;</span>,<span class="attr">context</span>:<span class="variable language_">document</span>.<span class="property">body</span>,<span class="attr">success</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	$(<span class="variable language_">this</span>).<span class="title function_">addClass</span>(<span class="string">&quot;done&quot;</span>);</span><br><span class="line">&#125;&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="5、小技巧"><a href="#5、小技巧" class="headerlink" title="5、小技巧"></a>5、小技巧</h2><p>1、如何巩固JS（看jQuery源码，看游戏源码！）</p>
<p>2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）</p>
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>JavaScript使用</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="https://www.naste.top:1024/posts/79bd748b.html">https://www.naste.top:1024/posts/79bd748b.html</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>XiaoFei🥝</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2022-07-01</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2024-04-26</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/JavaScript/"><div class="tags-punctuation"><svg class="faa-tada icon" style="height:1.1em;width:1.1em;fill:currentColor;position:relative;top:2px;margin-right:3px" aria-hidden="true"><use xlink:href="#icon-sekuaibiaoqian"></use></svg></div>JavaScript</a></div></div><link rel="stylesheet" href="/css/coin.css" media="defer" onload="this.media='all'"/><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">投喂作者</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://www.naste.top:9000/images/wechat.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://www.naste.top:9000/images/wechat.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://www.naste.top:9000/images/alipay.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://www.naste.top:9000/images/alipay.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></button></div><audio id="coinAudio" src="https://npm.elemecdn.com/akilar-candyassets@1.0.36/audio/aowu.m4a"></audio><script defer="defer" src="/js/coin.js"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/f8e09374.html"><img class="prev-cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1515952743802.webp" onerror="onerror=null;src='/assets/r2.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue</div></div></a></div><div class="next-post pull-right"><a href="/posts/31749e75.html"><img class="next-cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1515952743757.webp" onerror="onerror=null;src='/assets/r2.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">HTML使用</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/1455011995.html" title="使用JavaScript修改网页任意元素的文本内容"><img class="cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1678672759.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-04-26</div><div class="title">使用JavaScript修改网页任意元素的文本内容</div></div></a></div><div><a href="/posts/23085fb7.html" title="ES6使用"><img class="cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1515952743772.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-04-26</div><div class="title">ES6使用</div></div></a></div><div><a href="/posts/1633003990.html" title="Axios"><img class="cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1515952743807.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-04-26</div><div class="title">Axios</div></div></a></div><div><a href="/posts/f8e09374.html" title="Vue"><img class="cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1515952743802.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-04-26</div><div class="title">Vue</div></div></a></div><div><a href="/posts/3038627921.html" title="pinia"><img class="cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1678672860.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-04-26</div><div class="title">pinia</div></div></a></div><div><a href="/posts/2591061011.html" title="vue3"><img class="cover" src= "" data-lazy-src="https://www.naste.top:9000/webp/1678672776.webp" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2024-04-26</div><div class="title">vue3</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><svg class="meta_icon" style="width:22px;height:22px;position:relative;top:5px"><use xlink:href="#icon-mulu1"></use></svg><span style="font-weight:bold">目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB"><span class="toc-text">一、前端知识体系</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E5%89%8D%E7%AB%AF%E4%B8%89%E8%A6%81%E7%B4%A0"><span class="toc-text">1、前端三要素</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E3%80%811%E3%80%81%E7%BB%93%E6%9E%84%E5%B1%82%EF%BC%88HTML%EF%BC%89"><span class="toc-text">1、1、结构层（HTML）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E3%80%812%E3%80%81%E8%A1%A8%E7%8E%B0%E5%B1%82%EF%BC%88CSS%EF%BC%89"><span class="toc-text">1、2、表现层（CSS）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E3%80%813%E8%A1%8C%E4%B8%BA%E5%B1%82%EF%BC%88JavaScript%EF%BC%89"><span class="toc-text">1、3行为层（JavaScript）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81JavaScript%E6%A1%86%E6%9E%B6"><span class="toc-text">2、JavaScript框架</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#UI%E6%A1%86%E6%9E%B6"><span class="toc-text">UI框架</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JavaScript%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7"><span class="toc-text">JavaScript构建工具</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E4%B8%89%E7%AB%AF%E5%90%8C%E4%B8%80"><span class="toc-text">3、三端同一</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B7%E5%90%88%E5%BC%80%E5%8F%91%EF%BC%88Hybrid-App%EF%BC%89"><span class="toc-text">混合开发（Hybrid App）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F"><span class="toc-text">微信小程序</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8"><span class="toc-text">二、快速入门</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E5%BC%95%E5%85%A5JavaScript"><span class="toc-text">1、引入JavaScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95%E5%85%A5%E9%97%A8"><span class="toc-text">2、基本语法入门</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%AE%80%E5%8D%95%E5%AE%9A%E4%B9%89"><span class="toc-text">3、数据类型简单定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81%E4%B8%A5%E6%A0%BC%E6%A3%80%E6%9F%A5%E6%A8%A1%E5%BC%8F"><span class="toc-text">4、严格检查模式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">三、数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%BD%BF%E7%94%A8"><span class="toc-text">1、字符串使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E6%95%B0%E7%BB%84%E4%BD%BF%E7%94%A8"><span class="toc-text">2、数组使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6"><span class="toc-text">4、流程控制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E3%80%81Map%E5%92%8CSet%EF%BC%88ES6%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7%EF%BC%89"><span class="toc-text">5、Map和Set（ES6的新特性）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6%E3%80%81iterator%EF%BC%88es6%E6%96%B0%E7%89%B9%E6%80%A7%EF%BC%89"><span class="toc-text">6、iterator（es6新特性）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E8%87%AA%E5%B8%A6%E5%8F%82%E6%95%B0%EF%BC%88arguments%EF%BC%89"><span class="toc-text">函数自带参数（arguments）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E5%8F%98%E5%BD%A2%E5%8F%82%EF%BC%88%E2%80%A6rest%EF%BC%89"><span class="toc-text">可变形参（…rest）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-text">2、变量的作用域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E6%96%B9%E6%B3%95"><span class="toc-text">3、方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95"><span class="toc-text">定义方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81%E9%97%AD%E5%8C%85%E5%87%BD%E6%95%B0"><span class="toc-text">4、闭包函数</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E5%86%85%E9%83%A8%E5%AF%B9%E8%B1%A1"><span class="toc-text">五、内部对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%88%AB%E7%9A%84%E6%B5%8B%E8%AF%95"><span class="toc-text">1、对象类别的测试</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81Date%E4%BD%BF%E7%94%A8"><span class="toc-text">2、Date使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81JSON"><span class="toc-text">3、JSON</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81BSON"><span class="toc-text">4、BSON</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E3%80%81AJAX"><span class="toc-text">5、AJAX</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%AD%E3%80%81%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B"><span class="toc-text">六、面向对象编程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1"><span class="toc-text">1、原型对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81class%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1"><span class="toc-text">2、class创建对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81class%E7%BB%A7%E6%89%BF"><span class="toc-text">3、class继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81JavaScript%E7%BB%A7%E6%89%BF%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-text">3、JavaScript继承原型链</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B8%83%E3%80%81%E6%93%8D%E4%BD%9CBOM%E5%AF%B9%E8%B1%A1%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-text">七、操作BOM对象（重点）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BB%8B%E7%BB%8D"><span class="toc-text">1、浏览器介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81window%E5%AF%B9%E8%B1%A1%EF%BC%88%E9%87%8D%E8%A6%81%EF%BC%89"><span class="toc-text">2、window对象（重要）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81Navigator%EF%BC%88%E4%B8%8D%E5%BB%BA%E8%AE%AE%E4%BD%BF%E7%94%A8%EF%BC%89"><span class="toc-text">3、Navigator（不建议使用）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81screen"><span class="toc-text">4、screen</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E3%80%81location-%E9%87%8D%E8%A6%81"><span class="toc-text">5、location(重要)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6%E3%80%81history%EF%BC%88%E4%B8%8D%E5%BB%BA%E8%AE%AE%E4%BD%BF%E7%94%A8-%EF%BC%89"><span class="toc-text">6、history（不建议使用 ）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7%E3%80%81document%EF%BC%88%E5%86%85%E5%AE%B9DOM%EF%BC%89"><span class="toc-text">7、document（内容DOM）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%AB%E3%80%81%E6%93%8D%E4%BD%9CDOM%E5%AF%B9%E8%B1%A1%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-text">八、操作DOM对象（重点）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E6%A0%B8%E5%BF%83%EF%BC%88%E8%8A%82%E7%82%B9%E7%9A%84%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5%EF%BC%89"><span class="toc-text">1、核心（节点的增删改查）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E8%8E%B7%E5%BE%97Dom%E8%8A%82%E7%82%B9"><span class="toc-text">2、获得Dom节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E6%9B%B4%E6%96%B0%E8%8A%82%E7%82%B9"><span class="toc-text">3、更新节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9"><span class="toc-text">4、删除节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E3%80%81%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9"><span class="toc-text">5、插入节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7%E3%80%81insertBefore%EF%BC%88%E5%85%83%E7%B4%A0%E5%89%8D%E6%8F%92%E5%85%A5%EF%BC%89"><span class="toc-text">7、insertBefore（元素前插入）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%B9%9D%E3%80%81%E6%93%8D%E4%BD%9C%E8%A1%A8%E5%8D%95"><span class="toc-text">九、操作表单</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E8%A1%A8%E5%8D%95%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-text">1、表单是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E8%8E%B7%E5%BE%97%E8%A6%81%E6%8F%90%E4%BA%A4%E7%9A%84%E4%BF%A1%E6%81%AF"><span class="toc-text">2、获得要提交的信息</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E6%8F%90%E4%BA%A4%E8%A1%A8%E5%8D%95%E3%80%82md5%E5%8A%A0%E5%AF%86%E5%AF%86%E7%A0%81%EF%BC%8C%E8%A1%A8%E5%8D%95%E4%BC%98%E5%8C%96"><span class="toc-text">3、提交表单。md5加密密码，表单优化</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8D%81%E3%80%81jQuery"><span class="toc-text">十、jQuery</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E8%8E%B7%E5%8F%96jQuery"><span class="toc-text">1、获取jQuery</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2%E3%80%81%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">2、选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3%E3%80%81%E4%BA%8B%E4%BB%B6"><span class="toc-text">3、事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4%E3%80%81%E6%93%8D%E4%BD%9CDOM"><span class="toc-text">4、操作DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5%E3%80%81%E5%B0%8F%E6%8A%80%E5%B7%A7"><span class="toc-text">5、小技巧</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer" style="background-color: transparent;"><div id="footer-wrap"><div id="ft"><div class="ft-item-1"><div class="t-top"><div class="t-t-l"><p class="ft-t t-l-t">格言🧬</p><div class="bg-ad"><div>再看看那个光点，它就在这里，这是家园，这是我们 —— 你所爱的每一个人，你认识的一个人，你听说过的每一个人，曾经有过的每一个人，都在它上面度过他们的一生✨</div><div class="btn-xz-box"><a class="btn-xz" target="_blank" rel="noopener" href="https://stellarium.org/">点击开启星辰之旅</a></div></div></div><div class="t-t-r"><p class="ft-t t-l-t">猜你想看💡</p><ul class="ft-links"><li><a href="/posts/eec9786.html">魔改指南</a><a href="/box/nav/">网址导航</a></li><li><a href="/social/link/">我的朋友</a><a href="/comments/">留点什么</a></li><li><a href="/personal/about/">关于作者</a><a href="/archives/">文章归档</a></li><li><a href="/categories/">文章分类</a><a href="/tags/">文章标签</a></li><li><a href="/box/Gallery/">我的画廊</a><a href="/personal/bb/">我的唠叨</a></li><li><a href="/site/time/">建设进程</a><a href="/site/census/">网站统计</a></li></ul></div></div></div><div class="ft-item-2"><p class="ft-t">推荐友链⌛</p><div class="ft-img-group"><div class="img-group-item"><a href="https://www.naste.top:1024/" title="XiaoFei🥝"><img src= "" data-lazy-src="https://www.naste.top:9000/images/cat.jpg" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div><div class="img-group-item"><a href="javascript:void(0)" title="广告位招租"><img src= "" data-lazy-src="https://www.naste.top:9000/webp/65307a5828af6790.webp" alt=""/></a></div></div></div></div><div class="copyright"><span><b>&copy;2022-2024</b></span><span><b>&nbsp;&nbsp;By XiaoFei🥝</b></span></div><div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" title="博客框架为Hexo_v6.3.0"><img src= "" data-lazy-src="https://static.naste.top:1024/svg/blog/Frame-Hexo-blue.svg" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" title="主题版本Butterfly_v4.3.1"><img src= "" data-lazy-src="https://static.naste.top:1024/svg/blog/Theme-Butterfly-6513df.svg" alt=""/></a><a class="github-badge" target="_blank" href="https://vercel.com/" style="margin-inline:5px" title="本站采用多线部署，主线路托管于Vercel"><img src= "" data-lazy-src="https://static.naste.top:1024/svg/blog/Hosted-Vercel-brightgreen.svg" alt=""/></a><a class="github-badge" target="_blank" href="https://user.51.la/" style="margin-inline:5px" title="本站数据分析得益于51la技术支持"><img src= "" data-lazy-src="https://static.naste.top:1024/svg/blog/Analytics-51la-3db1eb.svg" alt=""/></a><a class="github-badge" target="_blank" href="https://github.com/" style="margin-inline:5px" title="本网站源码由Github提供存储仓库"><img src= "" data-lazy-src=" https://static.naste.top:1024/svg/blog/Source-Github-d021d6.svg" alt=""/></a></p></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><a class="icon-V hidden" onclick="switchNightMode()" title="浅色和深色模式转换"><svg width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button><button class="share" type="button" title="右键模式" onclick="changeMouseMode()"><i class="fas fa-mouse"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog right_side"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button class="share" type="button" title="分享链接" onclick="share()"><i class="fas fa-share-nodes"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0<span>%</span></span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div class="js-pjax" id="rightMenu"><div class="rightMenu-group rightMenu-small"><a class="rightMenu-item" href="javascript:window.history.back();"><i class="fa fa-arrow-left"></i></a><a class="rightMenu-item" href="javascript:window.history.forward();"><i class="fa fa-arrow-right"></i></a><a class="rightMenu-item" href="javascript:window.location.reload();"><i class="fa fa-refresh"></i></a><a class="rightMenu-item" href="javascript:rmf.scrollToTop();"><i class="fa fa-arrow-up"></i></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-text"><a class="rightMenu-item" href="javascript:rmf.copySelect();"><i class="fa fa-copy"></i><span>复制</span></a><a class="rightMenu-item" href="javascript:window.open(&quot;https://www.baidu.com/s?wd=&quot;+window.getSelection().toString());window.location.reload();"><i class="fa fa-search"></i><span>百度搜索</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-too"><a class="rightMenu-item" href="javascript:window.open(window.getSelection().toString());window.location.reload();"><i class="fa fa-link"></i><span>转到链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-paste"><a class="rightMenu-item" href="javascript:rmf.paste()"><i class="fa fa-copy"></i><span>粘贴</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-post"><a class="rightMenu-item" href="#post-comment"><i class="fas fa-comment"></i><span>空降评论</span></a><a class="rightMenu-item" href="javascript:rmf.copyWordsLink()"><i class="fa fa-link"></i><span>复制本文地址</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-to"><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>新窗口打开</span></a><a class="rightMenu-item" id="menu-too" href="javascript:rmf.open()"><i class="fa fa-link"></i><span>转到链接</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制链接</span></a></div><div class="rightMenu-group rightMenu-line hide" id="menu-img"><a class="rightMenu-item" href="javascript:rmf.saveAs()"><i class="fa fa-download"></i><span>保存图片</span></a><a class="rightMenu-item" href="javascript:rmf.openWithNewTab()"><i class="fa fa-window-restore"></i><span>在新窗口打开</span></a><a class="rightMenu-item" href="javascript:rmf.copyLink()"><i class="fa fa-copy"></i><span>复制图片链接</span></a></div><div class="rightMenu-group rightMenu-line"><a class="rightMenu-item" href="javascript:randomPost()"><i class="fa fa-paper-plane"></i><span>随便逛逛</span></a><a class="rightMenu-item" href="javascript:switchNightMode();"><i class="fa fa-moon"></i><span>昼夜切换</span></a><a class="rightMenu-item" href="/personal/about/"><i class="fa fa-info-circle"></i><span>关于博客</span></a><a class="rightMenu-item" href="javascript:toggleWinbox();"><i class="fas fa-cog"></i><span>美化设置</span></a><a class="rightMenu-item" href="javascript:rmf.fullScreen();"><i class="fas fa-expand"></i><span>切换全屏</span></a><a class="rightMenu-item" href="javascript:window.print();"><i class="fa-solid fa-print"></i><span>打印页面</span></a></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.staticfile.org/fancyapps-ui/4.0.31/fancybox.umd.min.js"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js" type="module"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (true){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><script async="async">var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())
setTimeout(function(){preloader.endLoading();}, 5000);
document.getElementById('loading-box').addEventListener('click',()=> {preloader.endLoading()})</script><div class="js-pjax"><script>(()=>{
  const init = () => {
    twikoo.init(Object.assign({
      el: '#twikoo-wrap',
      envId: '',
      region: '',
      onCommentLoaded: function () {
        btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
      }
    }, null))
  }

  const getCount = () => {
    const countELement = document.getElementById('twikoo-count')
    if(!countELement) return
    twikoo.getCommentsCount({
      envId: '',
      region: '',
      urls: [window.location.pathname],
      includeReply: false
    }).then(function (res) {
      countELement.innerText = res[0].count
    }).catch(function (err) {
      console.error(err);
    });
  }

  const runFn = () => {
    init()
    
  }

  const loadTwikoo = () => {
    if (typeof twikoo === 'object') {
      setTimeout(runFn,0)
      return
    } 
    getScript('https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js').then(runFn)
  }

  if ('Twikoo' === 'Twikoo' || !true) {
    if (true) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
    else loadTwikoo()
  } else {
    window.loadOtherComment = () => {
      loadTwikoo()
    }
  }
})()</script></div><script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.min.js"></script><script async src="https://cdn1.tianli0.top/npm/vue@2.6.14/dist/vue.min.js"></script><script async src="https://cdn1.tianli0.top/npm/element-ui@2.15.6/lib/index.js"></script><script async src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script><script defer type="text/javascript" src="https://cdn1.tianli0.top/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script><script async src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script><script defer src="https://cdn1.tianli0.top/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script><script async src="//at.alicdn.com/t/c/font_3586335_hsivh70x0fm.js"></script><script async src="//at.alicdn.com/t/c/font_3636804_gr02jmjr3y9.js"></script><script async src="//at.alicdn.com/t/c/font_3612150_kfv55xn3u2g.js"></script><script async src="https://cdn.wpon.cn/2022-sucai/Gold-ingot.js"></script><canvas id="universe"></canvas><canvas id="snow"></canvas><script defer src="/js/fomal.js"></script><link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script><script src="https://cdn1.tianli0.top/npm/js-heo@1.0.12/metingjs/Meting.min.js"></script><script src="https://lib.baomitu.com/pjax/0.2.8/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax","#bibi","body > title","#app","#tag-echarts","#posts-echart","#categories-echarts"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --> <script data-pjax>if(document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    var parent = document.getElementById('recent-posts');
    var child = '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet"><div class="magnet_item"><a class="magnet_link" href="https://www.naste.top:1024/categories/Java/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🍡 XiaoFeiのJava学习笔记 (55)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="https://www.naste.top:1024/categories/Linux/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🍼 XiaoFeiのLinux笔记 (33)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="https://www.naste.top:1024/categories/Python/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🍉 XiaoFeiのPython笔记 (2)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="https://www.naste.top:1024/categories/前端/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🍟 XiaoFeiの前端笔记 (17)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="https://www.naste.top:1024/categories/Other/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">🍥 XiaoFeiのOther笔记 (10)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item" style="visibility: hidden"></div><a class="magnet_link_more"  href="https://www.naste.top:1024/categories/" style="flex:1;text-align: center;margin-bottom: 10px;">查看更多...</a></div></div>';
    console.log('已挂载magnet')
    parent.insertAdjacentHTML("afterbegin",child)}
     </script><style>#catalog_magnet{flex-wrap: wrap;display: flex;width:100%;justify-content:space-between;padding: 10px 10px 0 10px;align-content: flex-start;}.magnet_item{flex-basis: calc(33.333333333333336% - 5px);background: #e9e9e9;margin-bottom: 10px;border-radius: 8px;transition: all 0.2s ease-in-out;}.magnet_item:hover{background: var(--text-bg-hover)}.magnet_link_more{color:#555}.magnet_link{color:black}.magnet_link:hover{color:white}@media screen and (max-width: 600px) {.magnet_item {flex-basis: 100%;}}.magnet_link_context{display:flex;padding: 10px;font-size:16px;transition: all 0.2s ease-in-out;}.magnet_link_context:hover{padding: 10px 20px;}</style>
    <style></style><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/204253054.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://www.naste.top:9000/webp/1675912191.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-08</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/204253054.html&quot;);" href="javascript:void(0);" alt="">SpringBoot使用实现定时任务和xxl-job实现分布式任务调度</a><div class="blog-slider__text">SpringBoot使用实现定时任务和xxl-job实现分布式任务调度</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/204253054.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/538133837.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://www.naste.top:9000/webp/1678672933.webp" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2023-03-15</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/538133837.html&quot;);" href="javascript:void(0);" alt="">Hexo中Markdown语法与外挂标签写法汇总</a><div class="blog-slider__text">Hexo中Markdown语法与外挂标签写法汇总</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/538133837.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '2s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '2s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script></div><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js"></script><script data-pjax src="https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js"></script><script data-pjax>
  function gitcalendar_injector_config(){
      var parent_div_git = document.getElementById('gitZone');
      var item_html = '<div class="recent-post-item" id="gitcalendarBar" style="width:100%;height:auto;padding:10px;"><style>#git_container{min-height: 320px}@media screen and (max-width:650px) {#git_container{min-height: 0px}}</style><div id="git_loading" style="width:10%;height:100%;margin:0 auto;display: block;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animatetransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animatetransform></path></svg><style>#git_container{display: none;}</style></div><div id="git_container"></div></div>';
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      console.log('已挂载gitcalendar')
      }

    if( document.getElementById('gitZone') && (location.pathname ==='/personal/about/'|| '/personal/about/' ==='all')){
        gitcalendar_injector_config()
        GitCalendarInit("https://gitcalendar.naste.top/api?xiao-i-fei",['#d9e0df', '#c6e0dc', '#a8dcd4', '#9adcd2', '#89ded1', '#77e0d0', '#5fdecb', '#47dcc6', '#39dcc3', '#1fdabe', '#00dab9'],'xiao-i-fei')
    }
  </script><!-- hexo injector body_end end --></body></html>